Typescript error when using Link with MUI's typography and parameters

[cyb456]

Which project does this relate to?

Router

Describe the bug

I updated my project dependencies and encountered this typescript error on typography components that used tanstack router links

No overload matches this call.
  Overload 1 of 2, '(props: { component: LinkComponent<"a">; } & TypographyOwnProps & CommonProps & Omit<Omit<Omit<Omit<HTMLProps<"a">, "preload" | "children">, "ref"> & ... 8 more ... & LinkPropsChildren, "ref"> & { ...; }, "children" | ... 112 more ... | "variantMapping">): Element | null', gave the following error.
    Object literal may only specify known properties, and 'testParam' does not exist in type 'ParamsReducerFn<Router<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, TrailingSlashOption, Record<...>, Record<...>>, "PATH", string, string | undefined>'.
  Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element | null', gave the following error.
    Type '{ children: string; component: LinkComponent<"a">; params: { testParam: string; }; to: string; }' is not assignable to type 'IntrinsicAttributes & TypographyOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ...; }, "children" | ... 112 more ... | "variantMapping">'.
      Property 'component' does not exist on type 'IntrinsicAttributes & TypographyOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ...; }, "children" | ... 112 more ... | "variantMapping">'.(2769)
link.d.ts(64, 5): The expected type comes from property 'params' which is declared here on type 'IntrinsicAttributes & { component: LinkComponent<"a">; } & TypographyOwnProps & CommonProps & Omit<Omit<...> & { ...; }, "children" | ... 112 more ... | "variantMapping">'

Your Example Website or App

https://stackblitz.com/edit/github-pzkexk?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

install MUI and tanstack router use a Link as the component for a typography component have a parameter present this can be seen in the stackblitz link for the about page from inside the __root.tsx

Expected behavior

No typescript error

Screenshots or Videos

No response

Platform

• OS: linux
• Browser: chromium
• Version: 128.0.6613.119 (Official Build) snap (64-bit)

Additional context

relevant dependency update was @tanstack/react-router 1.53.1 to @tanstack/react-router 1.57.15 @mui/material 6.0.2 to @mui/material 6.1.0

[mrlubos]

Is this a regression @cyb456 ?

[cyb456]

Is this a regression @cyb456 ?

It used to work no problem at least on 1.53.1 and previous, I do not know when it started happening after that version

[SeanCassiere]

With the new custom link guide in the docs, I'm closing this in favor using the official guide. https://tanstack.com/router/latest/docs/framework/react/guide/custom-link

[tobyzerner]

@SeanCassiere Thanks, it's good to have this documented. Curious, is there a reason that it's no longer possible to simply do <Button component={Link} ... /> like it was in 1.53.1 and prior?

[SeanCassiere]

@tobyzerner this due to the number of generics the TSR Link component requires. MUI doesn't correctly handles these types correctly by default. Not to mention, our types aren't static. They can easily change between releases, since we only guarantee runtime functionality between versions, not the types.