TypeScript枚举能否作为类型？React状态使用报错排查

问题根源 #

你遇到的错误是TypeScript类型推断机制导致的：当用useState(FetchState.NULL)初始化状态时，TypeScript会自动将状态类型推断为单一枚举成员类型FetchState.NULL，但你手动声明的状态类型是整个FetchState枚举，同时setState的类型写为React.Dispatch<FetchState>，这和useState实际推导的SetStateAction<FetchState.NULL>不兼容，因此IDE抛出类型不匹配错误。

而你之前单独使用枚举作为变量类型（比如let a: Test = Test.A）没问题，是因为直接给变量指定了完整的枚举类型，不存在自动推断的冲突。

解决方法 #

方法1：给useState显式指定泛型（推荐）

直接告诉TypeScript状态的类型是整个FetchState枚举，避免自动推断为单一成员，同时无需手动声明元组类型，TypeScript会自动推导setState的正确类型：

const [state, setState] = useState<FetchState>(FetchState.NULL);

方法2：修正手动声明的元组类型

如果一定要手动声明状态和setState的类型，需要把setState的类型改为React.Dispatch<React.SetStateAction<FetchState>>，确保与泛型类型匹配：

const [state, setState]: [FetchState, React.Dispatch<React.SetStateAction<FetchState>>] = useState(FetchState.NULL);

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