@expo/vector-icons导出组件无法作为JSX组件使用报错求助

报错提示：

Component exposed from @expo/vector-icons cannot be used as a JSX component

使用@expo/vector-icons导出的AntDesign组件时触发上述TS报错，相关实现代码如下，写法完全符合官方文档规范：

import { AntDesign } from "@expo/vector-icons";

export type Icon = {
  name: "home" | "crafts";
};

export function Icon({ name }: Icon) {
  return (
    <AntDesign
      size={24}
      name={(() => {
        switch (name) {
          case "crafts":
            return "appstore-o";
          case "home":
          default:
            return "home";
        }
      })()}
      color="black"
    />
  );
}

该问题属于TypeScript类型兼容问题，和组件业务写法无关：

• 常见于React 18+、TypeScript 5.0+环境搭配版本较旧的@expo/vector-icons时，包的类型导出格式不符合新版TS对JSX组件的类型校验规则，TS无法正确识别导出的组件为合法JSX组件。

按优先级从高到低选择对应方案即可：

• 升级依赖到兼容版本
  执行对应包管理命令将@expo/vector-icons升级到最新版：

  # npm 用户
  npm install @expo/vector-icons@latest
  # yarn 用户
  yarn upgrade @expo/vector-icons@latest
  # pnpm 用户
  pnpm update @expo/vector-icons@latest
  

  升级完成后在VS Code中按下Ctrl+Shift+P（macOS为Cmd+Shift+P），调出命令面板选择TypeScript: Restart TS Server重启TS服务，报错即可消除。
• 补充类型声明（适用于暂时无法升级依赖的场景）
  在项目根目录的全局类型声明文件（通常命名为global.d.ts，需确保该文件被tsconfig.json的include配置覆盖）中添加如下模块声明，手动修正组件类型：

  import type { Component } from "react";
  import type { IconProps } from "@expo/vector-icons/build/createIconSet";
  
  declare module "@expo/vector-icons" {
    export class AntDesign extends Component<IconProps<string>> {}
    // 项目中用到其他图标集可按相同格式补充声明
  }
  

• 临时类型断言（仅用于紧急调试，不推荐长期使用）
  在使用组件的文件中对导入的图标组件做类型转换，绕过TS的类型校验：

  import { AntDesign as AntDesignOrigin } from "@expo/vector-icons";
  const AntDesign = AntDesignOrigin as unknown as React.FC<React.ComponentProps<typeof AntDesignOrigin>>;
  

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