T
TanStack•7mo ago
ambitious-aqua

Type error in `params.parse` callback with a route that include a path param

I have a file src/routes/_restricted/projects/$projectId.content.tsx with this code : 
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute(
  "/_restricted/projects/$projectId/content",
)({
  component: RouteComponent,
  params: {
    parse: (params) => {
      return { projectId: Number(params.projectId) };
      //                          ^? (parameter) params: Record<never, string>
    },
    stringify: (params) => {
      return { projectId: params.projectId.toString() };
    },
  },
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  console.log(projectId);
  //              ^? const projectId: number
  return (
    <div className="size-full"></div>
  );
}
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute(
  "/_restricted/projects/$projectId/content",
)({
  component: RouteComponent,
  params: {
    parse: (params) => {
      return { projectId: Number(params.projectId) };
      //                          ^? (parameter) params: Record<never, string>
    },
    stringify: (params) => {
      return { projectId: params.projectId.toString() };
    },
  },
});

function RouteComponent() {
  const { projectId } = Route.useParams();
  console.log(projectId);
  //              ^? const projectId: number
  return (
    <div className="size-full"></div>
  );
}
I don't know why I have this error on the params.parse callback. Do you think it my be a bug? I also have a "/_restricted/projects/$projectId" where it works correctly.
3 Replies
ambitious-aqua
ambitious-aquaOP•7mo ago
Here is the error
Property 'projectId' does not exist on type 'Record<never, string>'.
fair-rose
fair-rose•7mo ago
params must be parsed in the route that defines them. so one level above that route you currently have it in
ambitious-aqua
ambitious-aquaOP•7mo ago
ho nice so I don't have to parse it again thanks I get it. Solved.

Did you find this page helpful?