TypeScript中JSX元素类型'Icon'无构造或调用签名问题排查

问题根源 #

你现在的导航数组里存的是已经实例化的JSX元素（比如<ComputerDesktopIcon />），而不是组件本身。当你在map里尝试用<Icon />调用它时，TypeScript会报错——因为Icon此时是一个渲染好的元素，不是可被调用的组件（函数/类组件）。

修复步骤 #

1. 修改导航数组的存储内容
   把数组里的<ComputerDesktopIcon />改成ComputerDesktopIcon（去掉尖括号，存组件的引用而非实例）。

   错误示例：

   const menuItems = [
     { icon: <ComputerDesktopIcon />, label: 'Dashboard' },
     // ...其他项
   ];
   

   正确示例：

   const menuItems = [
     { icon: ComputerDesktopIcon, label: 'Dashboard' },
     // ...其他项
   ];
   

2. 添加正确的TypeScript类型定义
   给导航数组定义类型，明确icon是一个React组件类型：

   import type { ComponentType } from 'react';
   
   interface MenuItem {
     icon: ComponentType; // 表示这是一个React组件
     label: string;
   }
   
   const menuItems: MenuItem[] = [
     { icon: ComputerDesktopIcon, label: 'Dashboard' },
     // ...其他项
   ];
   

3. 在map中正确渲染组件
   现在Icon是组件本身，直接用<Icon />渲染即可：

   {menuItems.map((item) => (
     <div key={item.label}>
       <item.icon /> {/* 或者解构后用<Icon /> */}
       <span>{item.label}</span>
     </div>
   ))}
   

额外说明 #

如果你的组件需要传递props，比如尺寸、颜色，只需要在渲染时传递即可：

<item.icon size={20} color="#333" />

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