TypeScript中无法将React Icons组件作为对象值报错如何解决？

你遇到的报错是因为类型定义和实际赋值不匹配：你为icon字段指定的类型是IconType（这是React Icons组件本身的函数类型），但你实际赋值的是已经通过JSX语法实例化后的元素（比如<FaGithub />），二者类型不符触发了TS校验报错。

以下是两个可选解决方案：

方案1：修改类型适配现有赋值逻辑（改动最小） #

直接将icon的类型改为可渲染的JSX类型即可，原有渲染代码无需调整：

// 顶部引入React的节点类型，React17+无需导入React本身即可使用JSX，但类型需要显式引入
import type { ReactNode } from 'react'

const socialIcons: { icon: ReactNode, url: string }[] = [
    {
        icon: <FaGithub />,
        url: "./"
    },
    {
        icon: <FaLinkedin />,
        url: "./"
    },
    {
        icon: <FaTwitter />,
        url: "./"
    },
    {
        icon: <FaInstagram />,
        url: "./"
    },
    {
        icon: <FaFacebook />,
        url: "./"
    },
]

方案2：存储组件本身，渲染时实例化（灵活性更高） #

如果后续需要给图标传大小、颜色等自定义属性，推荐用这种方案：

1. 数组中存储组件本身，不要加JSX尖括号，icon类型保留IconType即可

import { IconType } from 'react-icons'

const socialIcons: { icon: IconType, url: string }[] = [
    {
        icon: FaGithub,
        url: "./"
    },
    {
        icon: FaLinkedin,
        url: "./"
    },
    {
        icon: FaTwitter,
        url: "./"
    },
    {
        icon: FaInstagram,
        url: "./"
    },
    {
        icon: FaFacebook,
        url: "./"
    },
]

2. 调整渲染逻辑，注意组件名需要首字母大写才会被React识别为自定义组件：

{socialIcons.map((icons, index) => {
    const {icon: Icon, url} = icons;
    return (
        <a href={url} key={index} target="_blank" rel="noopener noreferrer">
            <Icon size={20} color="#fff" /> {/* 可自由传自定义属性 */}
        </a>
    );
})}

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