T
TanStack•16mo ago
national-gold

Params typed incorrectly

I've seen a few discussions about this so it feels like a common error with a few different causes. Basically, if I have a route file called e.g. routes/admin/$activityType/index.tsx, like so: 
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/admin/$activityType/')({
  parseParams: (params) => ({ activityType: params.activityType }),
  component: () => <div>...</div>,
});
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/admin/$activityType/')({
  parseParams: (params) => ({ activityType: params.activityType }),
  component: () => <div>...</div>,
});
...I get the error Property 'activityType' does not exist on type 'Record<never, string>'. But I can use the parameter in the page just fine, it's just a type warning. What are some steps I should try to unpick this? I can make a new app with the same router version and I don't get the error...
8 Replies
wise-white
wise-white•16mo ago
please make a quick stackblitz reproduction by forking one of our file-based examples but this seems like a noop:' 
(params) => ({ activityType: params.activityType }),
(params) => ({ activityType: params.activityType }),
unless you want to really convert that type to a number or a union, it will exist as a string per default.
national-gold
national-goldOP•16mo ago
Oh, yeah, I’m not expecting that code to DO anything, but it shouldn’t give me a type error. I’ll try and reproduce it but as I said, I’ve got other to work in a fresh app, so I’m really just looking for debugging tips. …Yeah, as I thought, the StackBlitz examples don't have the same issue.
xenial-black
xenial-black•16mo ago
where exactly does the error occur? at the first or the second activityType?
national-gold
national-goldOP•16mo ago
Second one. params is being typed as Record<Never, string> for some reason. Okay, I've done some version-bisecting and the problem first occurs with 1.32.2. 1.32.0 is fine. Update: managed to get this working, I think. Potentially I was misunderstanding how params get used in child routes — does the parent route always need parseParams?
xenial-black
xenial-black•16mo ago
I think I understand your issue. parseParams only infers the params from path. If you have a parent that has the params and you're trying to parse it in the child this won't work. This might be intentional as parseParams only infers the params for the path of the route. Not fullPath and all merged params. Might be a bit confusing and I'm not sure if it's something we should think more about. @Manuel Schiller @TkDodo 🔮 do you think this is correct behaviour or it's confusing?
wise-white
wise-white•16mo ago
I think that's fine. You don't need to parse again on a child route if it has already been parsed in the parent, right?
xenial-black
xenial-black•16mo ago
It just depends if you'd like to parse all merged params or only params for the route you're creating But this is consistent behaviour with validateSearch. As this is only for the route you're creating
national-gold
national-goldOP•16mo ago
Oh my god. I had been updating my version of @tanstack/react-router but @tanstack/router-vite-plugin was way behind 🤦

Did you find this page helpful?