如何安全使用可能不存在的React图标组件？

问题本质 #

你遇到的是TypeScript编译时类型检查错误，而非运行时错误。try/catch只能处理运行时异常，对编译阶段的类型报错无效；普通类型断言没用，是因为你没覆盖TypeScript对icons对象的原始类型推断——它严格依据icons/index.ts的导出内容生成类型，不允许访问未声明的属性。

解决方案 #

方案1：通过类型断言转为宽松索引类型 #

直接在导入时，把icons断言为允许任意字符串键的类型，绕开TypeScript的严格检查：

import * as icons from "../icons";
import type { ComponentType } from "react";

// 转为支持任意字符串索引的类型，值为React组件或undefined
const iconMap = icons as Record<string, ComponentType | undefined>;

// 后端返回的动态图标名称
const dynamicIconName = "iconC";
const IconComponent = iconMap[dynamicIconName];

// 使用前必须判断组件是否存在，避免渲染undefined报错
if (IconComponent) {
  return <IconComponent />;
} else {
  // 图标不存在时的降级逻辑，比如显示默认占位图标
  return <DefaultPlaceholderIcon />;
}

方案2：修改icons目录的类型定义（适配自动生成场景） #

如果icons/index.ts是后端自动生成的，可在该目录下手动创建index.d.ts类型文件，扩展类型支持动态索引：

// icons/index.d.ts
import type { ComponentType } from "react";
import * as GeneratedIcons from "./index";

// 合并自动生成的类型与宽松索引类型
type IconMap = GeneratedIcons & Record<string, ComponentType | undefined>;

declare module "./index" {
  const icons: IconMap;
  export = icons;
}

之后导入icons时无需额外断言，直接按动态键访问即可。

关键注意事项 #

• 无论采用哪种方案，必须在渲染前判断组件是否存在：编译时的类型限制解除后，运行时访问不存在的图标仍会得到undefined，直接渲染会触发React错误。
• 若后端频繁新增图标，建议让生成icons/index.ts的脚本同时自动更新类型定义，避免手动维护成本。

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