配置useContext状态提供者时遭遇TypeScript类型错误

问题根源 #

你定义的UserContext类型是UserProvider | {}，初始值为空对象{}。当组件通过useContext获取值时，TypeScript无法确定当前值是UserProvider类型还是空对象，因此解构user时会报错——空对象不存在user属性。

解决方案 #

方案1：给Context提供完整的初始值（推荐）

修改Context的定义，去掉联合类型，直接使用UserProvider作为类型，并提供符合该类型的初始兜底值：

import { createContext, Dispatch, SetStateAction } from 'react';

// 先确保UserWithDetails已定义
interface UserWithDetails {
  // 你的用户属性定义
}

interface UserProvider {
  user: UserWithDetails | null;
  // 调整setUser类型，使其支持设置null（和user的类型匹配）
  setUser: Dispatch<SetStateAction<UserWithDetails | null>>;
}

// 提供符合UserProvider类型的初始值
export const UserContext = createContext<UserProvider>({
  user: null,
  setUser: () => {}, // 空函数作为兜底，避免未在Provider包裹时调用setUser报错
});

之后在Provider中传递值时，类型会完全匹配：

<UserContext.Provider value={{ user, setUser }}>
  {/* 子组件 */}
</UserContext.Provider>

组件中使用时即可正常解构，不会有类型错误：

const { user } = useContext(UserContext);

方案2：类型守卫（不推荐，仅适用于必须保留空初始值的场景）

如果确实需要保留UserProvider | {}的联合类型，可在组件中通过类型守卫判断值的类型：

const contextValue = useContext(UserContext);

if ('user' in contextValue) {
  // 此处TypeScript会自动推断contextValue为UserProvider类型
  const { user } = contextValue;
  // 安全使用user
}

额外提示 #

注意setUser的类型要和user的类型保持一致：如果user允许为null，那么setUser的SetStateAction也需要包含null，否则调用setUser(null)时会触发类型错误。

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