MUI主题自定义Link组件defaultProps遇TS错误，求解决方法

问题描述 #

在MUI主题配置中尝试全局自定义Link组件的默认component：

components: {
  MuiLink: {
    defaultProps: {
      component: LinkComponent,
    },
  },
}

出现TypeScript类型不匹配错误：

Type error: Type '{ component: ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>; }' is not assignable to type 'Partial<LinkProps>'.

尝试扩展接口时因模块路径错误，触发重复标识符错误：

declare module '@mui/material/Link/Link' {
  interface LinkProps {
    component: React.ReactNode
  }
}

错误信息：

Type error: Duplicate identifier 'LinkProps'.

解决方法 #

1. 修正模块扩展的路径与类型 #

MUI的LinkProps接口定义在@mui/material/Link主模块下，而非子模块@mui/material/Link/Link；且component属性的正确类型是React.ElementType（组件类型），而非React.ReactNode（渲染节点）。

替换为以下扩展代码：

declare module '@mui/material/Link' {
  interface LinkProps {
    component?: React.ElementType;
  }
}

若自定义LinkComponent包含额外props，可进一步指定兼容类型：

import type { InternalLinkProps } from './your-path-to-internal-link';

declare module '@mui/material/Link' {
  interface LinkProps {
    component?: React.ElementType<
      Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> 
      & InternalLinkProps
    >;
  }
}

2. 类型断言快速绕过检查 #

若不想扩展接口，可直接在主题配置中对component做类型断言，强制通过类型校验：

components: {
  MuiLink: {
    defaultProps: {
      component: LinkComponent as React.ElementType,
    },
  },
}

3. 确保自定义组件类型兼容 #

检查LinkComponent是否符合MUI Link对component的类型要求：需接受AnchorHTMLAttributes或MUI Link相关props，且支持forwardRef（若需传递ref）。示例：

import React, { forwardRef } from 'react';

type LinkComponentProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
  // 你的自定义props
};

const LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
  (props, ref) => {
    return <a ref={ref} {...props} />;
  }
);

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