Why react router v6 useParams returns object with properties possibly 'undefined'?

Question

Why react router v6 useParams returns object with properties possibly 'undefined'?

In my code below, my IDE indicates const slug: string | undefined.

const { slug } = useParams<"slug">();

It is because of the Params type definition:

/**
 * The parameters that were parsed from the URL path.
 */
export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

But why is not Params defined like this (without the | undefined):

export type Params<Key extends string = string> = {
  readonly [key in Key]: string;
};

If a route with a parameter matches the URL then the parameter cannot be undefined. So, is there any case when useParams returns with an undefined param?

Answer 1

I believe this is a questionable design choice. React Router 6 doesn't support optional parameters, so there is no apparent reason, but even if it did support, it should be responsibility of the user to determine which parameters are optional.

One way to go around it is:

export type MyParams = {
  a: string;
  b: string;
  c: string;
};

const { a, b, c } = useParams<keyof MyParams>() as MyParams;

Answer 2

Route params can be possibly undefined if the path has no defined parameters.

Example: "/path/to/page"

There are no route match params to access.

If you were to attempt to access a param

const { id } = useParams();

then id is of course, undefined.

Answer 3

One workaround is to extend module and change the desired type.

Create src/react-router-dom.d.ts file with content:

import 'react-router-dom';

declare module 'react-router-dom' {
  export declare function useParams<
    ParamsOrKey extends string | Record<string, string | undefined> = string,
  >(): { [key in ParamsOrKey]: string };
}