React.ReactNode没有帮助，因为我正在尝试使用mui按钮内的mui图标。

interface Link {
  url: string;
  icon: SvgIconComponent;
}

const socialLinks: Array<Link> = [
    {
      url: "https://uk-ua.facebook.com/",
      icon: Facebook,
    },
    {
      url: "https://www.linkedin.com/",
      icon: LinkedIn,
    },
    {
      url: "https://github.com/kerrimov/what-to-watch",
      icon: GitHub,
    },
  ];

const Social = () => {
 
  return (
    <Box>
      {socialLinks.map((link, index) => (
        <Button color="inherit" href={link.url} key={index}>{link.icon}</Button>
      ))} 
    </Box>
  );
};

有了这个我得到一个错误
超载3之1，'（道具：字符串;} & {子项？：React节点;类？：部分|未定义;颜色？：“继承”|“主要”|“次要”|“成功”|“错误”|“信息”|“警告”|未定义;... 9更多...;变体？：“文本”|...还有两个...|未定义; } &省略<...>&公用属性&省略<...>）：元素'，出现以下错误。\n键入'OverridableComponent〈SvgIconTypeMap〈{}，“svg”〉〉& { muiName：字符串; }'不能分配给类型' ReactNode '。\n

好吧，我想是这样的：

export const links: Link[] = [
    {
      url: "https://uk-ua.facebook.com/",
      icon: Facebook,
    },

export interface Link {
    url: string;
    icon: OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; };
}

终于，我明白了。

export const SECTIONS: ISection[] = [
  {
    LinkTo: Section.Type1,
    Icon: AccessibilityNewOutlinedIcon,
    Text: "Text 1",
  },
  {
    LinkTo: Section.Type2,
    Icon: GroupOutlinedIcon,
    Text: "Text 2",
  },
];

而对于抹灰部分，在构件中：

{SECTIONS.map((section, s) => (
          <MenuItem key={s} onClick={() => navigateTo(section.LinkTo)}>
            <ListItemIcon>
              {React.createElement(section.Icon)}
            </ListItemIcon>
            <ListItemText>{section.Text}</ListItemText>
          </MenuItem>
        ))}

这解决了我的问题，希望你也是。