T
TanStack•2y ago
useful-bronze

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
sensitive-blue
sensitive-blue•2y 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.
useful-bronze
useful-bronzeOP•2y 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.
absent-sapphire
absent-sapphire•2y ago
where exactly does the error occur? at the first or the second activityType?
useful-bronze
useful-bronzeOP•2y 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?
genetic-orange
genetic-orange•2y 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?
sensitive-blue
sensitive-blue•2y 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?
genetic-orange
genetic-orange•2y 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
useful-bronze
useful-bronzeOP•2y 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?