TanStackT
TanStack3mo ago
1 reply
sad-indigo

Access path params in head function

For some reason accessing path params in my head function, in order to set the title, causes weird TS errors. If I remove the quotes, to this

title: params.slug,

I get this error on the head function

'head' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.ts(7023)


I should also mention, this fails as well

export const Route = createFileRoute("/blog/$slug")({
  head: ({ params }) => {
    return {
      meta: [
        {
          title: `${params.slug} | Adam Rackis's blog`,
        },
      ],
    };
  },
  loader: async ({ params }) => {
    const post = getPostBySlug(params.slug, ["title", "date", "slug", "author", "content", "ogImage", "coverImage"]);
    const content = await markdownToHtml(post.content || "");

    return {
      slug: params.slug,
      post: {
        ...post,
        content,
      },
    };
  },
  component: RouteComponent,
});


which creates this error on the loader

Type '({ params }: LoaderFnContext<Register, RootRoute<Register, undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 7 more ..., undefined>) => Promise<...>' is not assignable to type '(ctx: LoaderFnContext<Register, RootRoute<Register, undefined, {}, AnyContext, AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, ... 7 more ..., undefined>) => never'.
Type 'Promise<{ slug: string; post: { content: string; }; }>' is not assignable to type 'never'.ts(2322)
image.png
Was this page helpful?