使用TS枚举作为useState泛型时出现React组件无效报错如何解决

问题根因 #

你遇到的报错和useState搭配枚举的写法完全无关，错误原因是你定义的枚举SomeType和项目中用于路由注册的屏幕组件重名了。当路由加载时枚举被误识别为屏幕组件传入了component属性，而枚举本身不是合法的React组件，因此触发了该报错。

解决方案 #

• 调整枚举的命名，避免和已有的路由屏幕组件重名，比如修改为SomeTypeEnum、ElementType等不会冲突的名称即可
• 也可以修改重名的路由屏幕组件的名称，保证二者命名不重复

补充说明 #

你写的枚举配合useState的代码本身没有语法错误，也不需要额外配置，是合法的TS写法：

export enum SomeType {
  WATER,
  AIR,
  FIRE,
}
const [someType, setSomeType] = useState<SomeType>(SomeType.WATER)

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