配置MuiLink传入React Router Link组件报类型错误如何解决

这个TS报错本质是MUI的类型推导限制：MuiLink默认的类型推导是照着它的默认根节点——原生<a>标签生成的，component是MUI多态组件的专属属性，根本不在原生a标签的属性列表里，TS自然会报属性不存在。
另外你贴的代码还漏引了createTheme方法，就算类型校验过了运行也会报未定义错误，记得补上。

最简单的解法就是给defaultProps加个类型断言，告诉TS这里要按MuiLink本身支持的全量属性（包括多态component属性）校验，不用按原生a标签的属性范围卡规则。修正后的可运行代码如下：

import * as React from 'react'
import type { LinkProps as RouterLinkProps } from 'react-router-dom'
import { Link as RouterLink } from 'react-router-dom'
// 补全缺失的createTheme导入
import { createTheme, type Components } from '@mui/material/styles'

const LinkBehavior = React.forwardRef<
  any,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props
  // 把MUI用的href属性映射成react-router需要的to属性
  return <RouterLink data-testid='custom-link' ref={ref} to={href} {...other} />
})

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        component: LinkBehavior,
      // 加这行类型断言就能解决TS报错
      } as Components['MuiLink']['defaultProps'],
    },
    // 可选配置：如果想让按钮、列表项等所有可点击组件默认都支持路由跳转，可以加上这段
    MuiButtonBase: {
      defaultProps: {
        LinkComponent: LinkBehavior,
      }
    }
  }
})

如果项目里大量用到自定义路由组件，不想每次写配置都加断言，可以在项目的全局类型声明文件（一般是src/vite-env.d.ts或者src/react-app-env.d.ts）里加一段模块类型扩展，一劳永逸：

// 替换成你项目里LinkBehavior组件的实际路径
import type { LinkBehavior } from '@/theme/components/LinkBehavior'

declare module '@mui/material/Link' {
  interface LinkProps {
    component?: typeof LinkBehavior
  }
}

内容的提问来源于stack exchange，提问作者Jamie