React自定义MUI组件TypeScript报错：map不存在于目标类型

错误原因 #

你的TypeScript报错核心是接口定义和实际传入的数据类型不匹配：

• 接口里menuItemElements被定义为单个{ icon?: JSX.Element; title: string }对象
• 但你实际传入的是包含多个该类型对象的数组，单个对象没有map方法，因此触发报错。

修正步骤 #

1. 修正Props接口 #

把menuItemElements改为数组类型，同时给单个菜单元素定义独立类型，提升类型安全性：

// 定义单个菜单元素的类型
type MenuItemElement = {
  icon?: JSX.Element;
  title: string;
};

interface Props {
  menuItemElements: MenuItemElement[]; // 改为数组类型
}

2. 调整组件渲染逻辑 #

你之前把所有菜单内容放在同一个MenuItem里，不符合MUI的使用逻辑，应该遍历数组为每个元素生成独立的MenuItem：

import { Menu, MenuItem, ListItemIcon, Typography } from '@mui/material';

const MenuItemKebab = ({ menuItemElements }: Props) => {
  return (
    <Menu>
      {/* 遍历数组，每个元素生成一个MenuItem */}
      {menuItemElements.map((element, index) => (
        <MenuItem key={index}> {/* React列表渲染必须加key属性 */}
          <ListItemIcon>{element.icon}</ListItemIcon>
          <Typography>{element.title}</Typography>
        </MenuItem>
      ))}
    </Menu>
  );
};

export default MenuItemKebab;

3. 调用代码无需修改 #

你之前定义的menuItems数组类型已经和修正后的接口匹配，直接传入即可正常使用。

额外提示 #

• 列表渲染时的key属性优先使用元素的唯一标识（比如id），用index是临时方案，避免在元素顺序变化时引发渲染异常。
• 去掉了any类型，用明确的MenuItemElement类型约束，避免类型不安全问题。

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