TypeScript环境下，material-ui@next中ListItem自定义根组件传to属性报错解决

这个问题我之前也碰到过，本质是TypeScript没办法自动推断出当你把component设为Link时，ListItem应该接受Link的额外属性（比如to）。下面给你几个靠谱的解决办法：

1. 利用Material UI组件的泛型支持（推荐） #

Material UI的ListItem组件支持泛型参数，用来指定你传入的component的类型，这样TypeScript就能识别to属性了：

import ListItem from '@mui/material/ListItem';
import { Link } from 'react-router-dom';

<ListItem<typeof Link> to="/profile" component={Link}>
  Profile
</ListItem>

这样写的话，TypeScript会自动合并ListItemProps和LinkProps的类型，不会再抛出属性不存在的错误。

2. 封装自定义ListItemLink组件（更优雅，适合复用） #

如果你的项目里很多地方都需要这种带路由跳转的列表项，不如封装一个复用组件，一次性解决类型问题：

import { ListItem, ListItemProps } from '@mui/material';
import { Link, LinkProps } from 'react-router-dom';
import React from 'react';

// 合并ListItem和Link的属性类型
type ListItemLinkProps = ListItemProps & LinkProps;

const ListItemLink: React.FC<ListItemLinkProps> = ({ to, ...rest }) => {
  return <ListItem component={Link} to={to} {...rest} />;
};

// 使用时非常简洁
<ListItemLink to="/profile">Profile</ListItemLink>

这个方法把类型逻辑封装在组件内部，业务代码里不用每次处理泛型，同时还能保留完整的类型检查。

3. 临时使用类型断言（不推荐，仅应急） #

如果你只是临时测试不想折腾类型，可以用as any跳过TypeScript的检查，但这会丢失类型安全，不建议在生产代码中使用：

<ListItem component={Link} to="/profile" as any>
  Profile
</ListItem>

错误原因补充 #

默认情况下，ListItemProps里并没有to属性，当你指定component={Link}时，TypeScript不会自动把Link的属性合并到ListItem的props中，所以需要我们手动告知TypeScript这些额外属性是合法的。

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