route.params[param] incorrectly shows param does not exist

[crhistianramirez]

I have two routes defined, one with route parameters, and one without:

declare module 'vue-router/auto/routes' {
  export interface RouteNamedMap {
    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
    '/catalog/categories/': RouteRecordInfo<'/catalog/categories/', '/catalog/categories', Record<never, never>, Record<never, never>>,
    '/catalog/categories/[id]': RouteRecordInfo<'/catalog/categories/[id]', '/catalog/categories/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
  }
}

In my component I am trying to access the current route's id parameter as such:

const route = useRoute()
const id = route.params.id

but I get the following typescript error:

Property 'id' does not exist on type 'Record<never, never> | { id: string; }'.
  Property 'id' does not exist on type 'Record<never, never>'.ts(2339)

Which is happening because the resulting union of Record<never, never> and { id: string; } is Record<never, never>. I think a better type would be something like {id?: string} to allow me to target route.params.id while at the same time hinting that route.params.id may not be defined (since it is dependent on a specific route being selected).

I'm currently working around this by doing the following which is not ideal because I basically throw away any type safety

const route = useRoute()
const id = (route.params as any).id

[posva]

Try passing a string and trigger autocomplete to useRoute(‘’), select the correct route and you’re good to go!

[crhistianramirez]

Thanks, this works.