[Bug]: useParams should not return undefined

[tzachov]

What version of React Router are you using?

6.1.1

Steps to Reproduce

Define a route with param (e.g. user/:id)
Use useParams:

const UserPage = () => {
  const { id } = useParams<'id'>()
  return <Profile userId={id} />
}

const Profile: React.FC<{ userId: string }> = ({ userId }) => {...}

This won't compile because id is possibly undefined and Profile expects string

Expected Behavior

id should not be string | undefined because /user should match a different route than /user/123

Actual Behavior

id is string | undefined unless you use cast:

interface UserParams {
  id: string
}

const UserPage = () => {
  const { id } = useParams<keyof UserParams>() as UserParams
  ...
}

[timdorr]

You cannot know at compile time the component will be contained within any Route. Hence, the params must be partial. We have specifically chosen this type because anything else would encourage unsafe behavior and produce types that essentially lie to you.

[tzachov]

It's a route param - not query string. If the parameter doesn't exist it means the route is different.
Let's say you have this configuration: /group/:groupId/post/:postId
If groupId is undefined the route will be /group/post/<postId> and if postId is undefined the route will be /group/<groupId>/post
These two examples should match different routes than /group/:groupId/post/:postId

A common convention is that path/route params are manditory while query params are optional.

[EnesKilicaslan]

I totally agree with @tzachov , this issue should be resolved instead of being closed.

[sagiMorPlanck]

I agree with @tzachov.
The convention is that path/route params are mandatory while query params are optional

[talks2much]

@timdorr I think that decision was completely wrong, #8498 (comment) already explained why. By default params must be mandatory. Let developer choose when to use optional params:

const Post: React.FC = () => {
    const params = useParams<{ groupId: string, postId?: string }>()
    // expected: groupId is required and postId not
    // actual: both are optional ...
    /* ... */
}

You make useParams generic useless and in 100% cases its much easier to cast the type:

const Post: React.FC = () => {
    const params = useParams() as { groupId: string, postId?: string }
    /* ... */
}

Why don't make useParams accept two args in generic:

• First one for mandatory params
• Second one for optional

And in case of passing an object force devs that want old behavior to write ?.

UPD: didn't see #8200 (comment) and #8200 (comment) earlier, but that's exactly what I mean

[vadimshvetsov]

I've found the most handy way for myself in using invariant here from tiny-invariant library.

import invariant from 'tiny-invariant'

interface UserParams {
  id: string
}

const UserPage = () => {
  const { id } = useParams<UserParams>()
  invariant(id, 'User id isn\'t set within the route')
  // After `invariant` evaluation `id` considering as truthy
  return <Profile userId={id} />
}

[spiropoulos94]

What version of React Router are you using?

6.1.1

Steps to Reproduce

Define a route with param (e.g. user/:id) Use useParams:

const UserPage = () => {
  const { id } = useParams<'id'>()
  return <Profile userId={id} />
}

const Profile: React.FC<{ userId: string }> = ({ userId }) => {...}

This won't compile because id is possibly undefined and Profile expects string

Expected Behavior

id should not be string | undefined because /user should match a different route than /user/123

Actual Behavior

id is string | undefined unless you use cast:

interface UserParams {
  id: string
}

const UserPage = () => {
  const { id } = useParams<keyof UserParams>() as UserParams
  ...
}

Hello, I was wondering about why do we have to explicitly set <keyof UserParams> as a type to pass on useParams. Nothing changes if we omit it and just call useParams() as UserParams instead.

I think that just casting it to our custom UserParams interface makes our code work propertly and also forces the return value to have the properties of the UserParams . Could you please explain? Maybe I am missing something.

Thank you for your time, this is really important for me, I have been searching an answer for ages.

[alex-ironside]

My solution is just a custom hook. It's not perfect, but it works

function useRequiredParams<T extends Record<string, any>>() {
  const params = useParams<T>();
  return params as T;
}

Usage:

export default function App() {
  const { id } = useRequiredParams<{ id: string }>();
  return <>test</>;
}

[ilbrando]

My solution is just a custom hook. It's not perfect, but it works

function useRequiredParams<T extends Record<string, any>>() {
  const params = useParams<T>();
  return params as T;
}

Usage:

export default function App() {
  const { id } = useRequiredParams<{ id: string }>();
  return <>test</>;
}

I agree, useParams shouldn't force us to make casts everywhere. Your work around solves the problem. Just for your information it can be written a bit shorter and you can avoid any by using unknown.

export const useRequiredParams = <T extends Record<string, unknown>>() => useParams() as T;

[ArturKustyaev]

My solution is just a custom hook. It's not perfect, but it works

function useRequiredParams<T extends Record<string, any>>() {
  const params = useParams<T>();
  return params as T;
}

Usage:

export default function App() {
  const { id } = useRequiredParams<{ id: string }>();
  return <>test</>;
}

I agree, useParams shouldn't force us to make casts everywhere. Your work around solves the problem. Just for your information it can be written a bit shorter and you can avoid any by using unknown.

export const useRequiredParams = <T extends Record<string, unknown>>() => useParams() as T;

how to pass an interface to a generic, an error pops up?

[ilbrando]

My solution is just a custom hook. It's not perfect, but it works

function useRequiredParams<T extends Record<string, any>>() {
  const params = useParams<T>();
  return params as T;
}

Usage:

export default function App() {
  const { id } = useRequiredParams<{ id: string }>();
  return <>test</>;
}

I agree, useParams shouldn't force us to make casts everywhere. Your work around solves the problem. Just for your information it can be written a bit shorter and you can avoid any by using unknown.

export const useRequiredParams = <T extends Record<string, unknown>>() => useParams() as T;

how to pass an interface to a generic, an error pops up?

I think this has to do with interfaces and Record, see this

By the way, I have stopped using interfaces and now only uses types, but of course that is not always an option.

[609harsh]

Which version release has this problem solved? i am using 6.27.0 and issue is still there