如何修复Type 'IconType'不能赋值给type 'ReactNode'的错误？

方案一：渲染时将Icon作为组件调用 #

你在data.ts中存储的是图标组件本身（比如FaGithub），而非组件渲染后的JSX元素。React要求渲染元素时必须使用<Component />的形式，直接传递组件引用会因类型不匹配报错。

修改Profile.tsx中的渲染代码，把{socialLink.icon}改为<socialLink.icon />：

<ul>
  {socialLinks.map((socialLink) => (
    <li key={socialLink.href}>
      <a href={socialLink.href}><socialLink.icon /></a>
    </li>
  ))}
</ul>

如果使用TypeScript，建议给socialLinks添加类型定义：

// data.ts
import { IconType } from "react-icons";
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";

type SocialLink = {
  name: string;
  href: string;
  icon: IconType;
};

export const socialLinks: SocialLink[] = [
  {
    name: "github",
    href: "#",
    icon: FaGithub,
  },
  {
    name: "twitter",
    href: "#",
    icon: FaTwitter,
  },
  {
    name: "discord",
    href: "#",
    icon: FaDiscord,
  },
];

方案二：在数据中存储已渲染的JSX元素 #

直接在data.ts中把图标组件渲染为JSX元素，这样icon字段的类型就是ReactNode，无需修改Profile.tsx：

// data.ts
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";

export const socialLinks = [
  {
    name: "github",
    href: "#",
    icon: <FaGithub />,
  },
  {
    name: "twitter",
    href: "#",
    icon: <FaTwitter />,
  },
  {
    name: "discord",
    href: "#",
    icon: <FaDiscord />,
  },
];

TypeScript环境下可添加对应类型定义：

import { ReactNode } from "react";
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";

type SocialLink = {
  name: string;
  href: string;
  icon: ReactNode;
};

export const socialLinks: SocialLink[] = [/* 数据内容 */];

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