React Icons TypeScript中字符串索引隐式any类型警告问题求助

问题核心：用字符串类型的item.icon去索引MaterialDesign模块时，TypeScript无法确认该字符串是否对应模块内的有效导出，因此抛出"隐式any类型"警告。

方案一：严格约束icon类型（推荐） #

将DataIcon接口的icon类型限定为MaterialDesign模块的导出键，既能在编译期校验图标名称合法性，又能消除警告：

import { createElement } from 'react';
import * as MaterialDesign from 'react-icons/md';

// 修改DataIcon接口的icon类型
interface DataIcon {
  icon: keyof typeof MaterialDesign;
  label: string;
}

interface AdvancedProps {
  data: Array<DataIcon>;
}

export default function Advanced({ data }: AdvancedProps) {
  return (
    <ul>
      {data?.map((item) => {
        const mdIcon = MaterialDesign[item.icon]; // 此处不再有类型警告
        return (
          <li key={item.icon}>
            <button type="button">{createElement(mdIcon)}</button>
            <p>{item.label}</p>
          </li>
        );
      })}
    </ul>
  );
}

如果mockDropdown中写了不存在的图标名称（比如'MdWrongIcon'），TypeScript会直接报错，提前规避错误。

方案二：类型断言+存在性检查（适配动态字符串场景） #

若icon的字符串值是动态获取的（比如来自后端接口），无法提前限定为固定图标名称，可通过类型断言告知TypeScript该字符串是合法键，同时增加存在性检查避免运行时错误：

import { createElement } from 'react';
import * as MaterialDesign from 'react-icons/md';

interface DataIcon {
  icon: string;
  label: string;
}

interface AdvancedProps {
  data: Array<DataIcon>;
}

export default function Advanced({ data }: AdvancedProps) {
  return (
    <ul>
      {data?.map((item) => {
        // 先检查当前icon是否存在于MaterialDesign模块中
        if (!(item.icon in MaterialDesign)) {
          return <li key={item.icon}>无效图标</li>; // 渲染默认内容或跳过
        }
        // 用类型断言指定索引类型
        const mdIcon = MaterialDesign[item.icon as keyof typeof MaterialDesign];
        return (
          <li key={item.icon}>
            <button type="button">{createElement(mdIcon)}</button>
            <p>{item.label}</p>
          </li>
        );
      })}
    </ul>
  );
}

注：代码中把data && data.map优化为data?.map（可选链操作符），写法更简洁；同时给li增加了key属性，符合React列表渲染要求。

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