如何正确映射MUI图标的类型？解决TS类型不兼容报错

问题背景 #

定义了如下TypeScript类型：

type MenuItem = {
  key: string;
  order: number;
  text: string;
  icon: typeof SvgIcon;
};

渲染菜单代码时触发TypeScript报错：

<List>
  {MENU.map((menuItem: MenuItem) => (
    <ListItem key={menuItem.key}>
      <ListItemButton>
        <ListItemIcon>{menuItem.icon}</ListItemIcon>
        <ListItemText primary={menuItem.text}>
          {menuItem.text}
        </ListItemText>
      </ListItemButton>
    </ListItem>
  ))}
</List>

报错信息：

typescript: Type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }' is not assignable to type 'ReactNode'.

需要缩小MenuItem.icon的类型范围，仅允许传入MUI图标库的图标，并解决渲染报错。

解决方案 #

1. 精准限定图标类型 #

MUI所有图标组件都符合OverridableComponent<SvgIconTypeMap<{}, "svg">>类型，通过这个类型可以严格限定icon字段只能接收MUI图标：

先导入必要类型：

import { SvgIconTypeMap, OverridableComponent } from '@mui/material/SvgIcon';

重新定义MenuItem类型：

type MenuItem = {
  key: string;
  order: number;
  text: string;
  icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
};

2. 修正图标渲染方式 #

报错的核心原因是直接将图标组件（函数/类）作为React节点渲染，React需要的是组件实例。需将{menuItem.icon}改为<menuItem.icon />，同时清理ListItemText的冗余内容：

<List>
  {MENU.map((menuItem: MenuItem) => (
    <ListItem key={menuItem.key}>
      <ListItemButton>
        <ListItemIcon>
          <menuItem.icon />
        </ListItemIcon>
        <ListItemText primary={menuItem.text} />
      </ListItemButton>
    </ListItem>
  ))}
</List>

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