如何解决React Icon组件中string无法赋值给keyof IconType的TS报错

你遇到的报错本质是ordinaryString的类型是宽泛的string，而组件icon参数要求的是IconType的所有键组成的窄联合类型，两者类型范围不匹配导致TS校验不通过，可按以下三种方案解决：

• 方案1：类型断言（适用于你100%确认ordinaryString的值一定是IconType合法键的场景）
  调用组件时直接用as做类型断言即可：

  <Icon icon={ordinaryString as keyof IconType} />
  

  注意：该方案仅会绕过TS的编译校验，不会做运行时检查，如果实际传入了非法键值，运行时可能出现渲染异常。

• 方案2：类型守卫+运行时校验（最安全的通用方案）
  先定义一个类型守卫函数，同时完成类型收窄和运行时合法性校验：

  function isLegalIconKey(val: string): val is keyof IconType {
    // 这里用Icons对象的键做校验，保证和实际渲染的图标集一致
    return Object.keys(Icons).includes(val)
  }
  

  调用组件前先做判断，还可以补充兜底逻辑：

  {isLegalIconKey(ordinaryString) ? (
    <Icon icon={ordinaryString} />
  ) : (
    {/* 这里可以替换成你的兜底图标或者错误提示 */}
    <DefaultIcon />
  )}
  

• 方案3：从源头定义变量类型（适用于ordinaryString是你可控的本地变量场景）
  如果ordinaryString不是从接口、用户输入等动态来源获取的，你可以在定义变量时就指定它的类型：

  const ordinaryString: keyof IconType = 'home' // 赋值为你需要的合法图标键
  

  这样后续调用组件时不需要做任何额外处理，TS会直接通过校验。

可选优化建议 #

你组件的入参定义可以优化为icon: keyof typeof Icons，不需要依赖IconType类型定义，避免出现IconType和实际Icons对象内容不一致的问题。

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