如何在TypeScript中声明react-icons图标？解决类型报错问题

问题根源 #

你当前的错误是因为类型不匹配：

• SidebarMenu接口的icon字段定义为IconType，这是指图标组件本身（构造函数/函数组件类型）；
• 但你赋值的是<AiOutlineHome />，这是已经渲染完成的JSX元素实例，两者类型无法兼容，因此触发报错。

两种解决方案 #

方案1：传递组件本身（推荐）

直接将图标组件（而非渲染后的JSX）赋值给icon字段，后续在使用时再渲染它：

修改数组代码：

export const SidebarMenuList: SidebarMenu[] = [
  {
    name: "Discover",
    icon: AiOutlineHome, // 移除尖括号，直接传组件本身
    id: SidebarCategory.Discover,
  },
]

使用时渲染图标：

{SidebarMenuList.map(menu => (
  <div key={menu.id} className="sidebar-item">
    <menu.icon size={20} color="#333" /> {/* 可动态传递props */}
    <span>{menu.name}</span>
  </div>
))}

这种方式的优势是可以在渲染时动态修改图标的属性（如尺寸、颜色），灵活性更高。

方案2：修改接口类型以匹配JSX元素

如果你不需要动态修改图标属性，希望直接存储渲染好的图标，可以把接口的icon类型改为JSX.Element：

修改接口定义：

import { JSX } from 'react';

export interface SidebarMenu {
  name: string;
  icon: JSX.Element; // 改为JSX元素类型
  id: SidebarCategory;
}

此时你原来的数组赋值代码无需修改，直接使用即可。

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