给Material-UI Button绑定自定义Link组件加variant触发TS错误如何解决

问题原因 #

你的猜测方向正确，核心问题是自定义Link组件的LinkProps类型仅声明接收MuiLink原生属性、NextLink的as/href属性和自定义的activeClassName，没有兼容MUI Button传递过来的额外属性（比如variant、color这类Button独有的属性）。

当你给Button指定component={Link}时，MUI会把Button的所有props都传递给自定义Link组件，但你的Link的TS类型没有声明接收这些额外属性，因此触发了类型不匹配错误。JS运行层面你已经通过...other把剩余参数透传给了下层组件，所以功能正常，仅存在类型报错。

修复方案 #

你只需要调整LinkProps的类型定义，兼容额外传递的属性即可，推荐两种修改方式：

方式1：宽松兼容（最省事） #

给类型加上任意属性兼容声明，不需要修改运行逻辑：

// 原定义
// type LinkProps = SelectedMuiLinkProps & SelectedNextLinkProps & {activeClassName?: string};

// 修改后的定义
type LinkProps = SelectedMuiLinkProps & SelectedNextLinkProps & {activeClassName?: string} & Record<string, any>;

方式2：严格类型校验 #

如果需要保留类型校验能力，可以显式继承MUI Button的属性类型：

import type { ButtonProps } from '@material-ui/core/Button';

type LinkProps = SelectedMuiLinkProps & SelectedNextLinkProps & {activeClassName?: string} & Partial<ButtonProps>;

修改完成后TS类型报错就会消失，原有运行逻辑不需要调整。

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