React应用报错：组件导入导出异常及动态图标渲染失败求助

报错提示「You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports」的核心原因是：当传入的icon字符串在Unicons对象中找不到对应组件时，SelectedIcon会变成undefined，React渲染undefined时就会抛出这类错误。

以下是修复后的代码：

import * as Unicons from '@iconscout/react-unicons';

// 生成仅包含有效图标名称的类型，避免传入无效值
type IconName = keyof typeof Unicons;

interface Props {
  icon: IconName;
  color?: string;
  size?: string;
}

export const UniconsCustom = ({ icon, color, size }: Props) => {
  const SelectedIcon = Unicons[icon];

  // 运行时检查组件是否存在，防止无效图标导致崩溃
  if (!SelectedIcon) {
    console.warn(`图标 "${icon}" 不存在于Unicons库中`);
    return null;
  }

  return <SelectedIcon size={size || '20'} color={color} />;
};

关键修复点： #

• 类型约束：用keyof typeof Unicons生成IconName类型，强制icon参数必须是Unicons库中存在的图标名称，从编译阶段避免传入无效值。
• 存在性检查：添加if (!SelectedIcon)判断，运行时如果遇到无效图标，会打印警告并返回null，不会导致应用崩溃。
• 保留动态渲染逻辑：依然可以通过传入图标名称字符串动态渲染对应组件，满足需求。

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