`useParams` fails to infer types form route's `Info`

[janhesters]

I'm using React Router as a...

framework

Reproduction

Just create a route with a dynamic path and then use the useParams hook:

import type { Info } from '.react-router/types/app/routes/path/to/your/route/+types';

// ...

const params = useParams<Info['params']>();

System Info

System:
    OS: macOS 15.3.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 86.42 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 134.1.76.73
    Chrome: 134.0.6998.89
    Safari: 18.3.1
  npmPackages:
    @react-router/dev: ^7.3.0 => 7.3.0 
    @react-router/node: ^7.3.0 => 7.3.0 
    @react-router/remix-routes-option-adapter: ^7.3.0 => 7.3.0 
    @react-router/serve: ^7.3.0 => 7.3.0 
    react-router: ^7.3.0 => 7.3.0 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

TypeScript should now that params contains the dynamic path value from Info (e.g. lang or whatever the parameters on your route are.)

Actual Behavior

useParams uses a Partial and the parameter can be undefined, even though it must always be set on the Route.

[timdorr]

We have to keep useParams's generic as Partial because we don't know the context it may be used in. The code in your example could be placed anywhere in your project, such as somewhere not under that route. If you didn't do guard checks for params, you would end up with the type system lying to you about the state at runtime.

Instead, I would see about getting them from the route component: https://reactrouter.com/start/framework/route-module#props-passed-to-the-component Those are guaranteed to be type safe, so don't need to be Partial and guarded.

[janhesters]

@timdorr thank you 🙏