React中TypeScript为何无法识别导出的带内置Provider的Context的currentUser值？

错误根源在于你创建UserContext时，初始值设为{}，TypeScript会自动推断这个Context的类型为空对象，因此当你尝试解构currentUser时，TS认为空对象不存在该属性，抛出TS2339错误。以下是具体修复步骤：

步骤1：定义Context的类型接口 #

先复用Firebase官方的User类型，再创建接口描述Context的值结构：

import { User } from 'firebase/auth';

interface AuthContextType {
  currentUser: User | null;
}

步骤2：用正确类型初始化Context #

将createContext的初始值改为符合AuthContextType的结构，初始状态设为null（组件挂载时还未完成用户状态检测）：

export const UserContext = createContext<AuthContextType>({
  currentUser: null
});

步骤3：修正Provider组件的类型 #

不要用any定义children属性，改用React内置的PropsWithChildren类型，让类型检查更严谨：

import { PropsWithChildren } from 'react';

export const AuthContextProvider = ({ children }: PropsWithChildren<{}>) => {
  // ... 原有逻辑
};

步骤4：优化useState的类型定义 #

移除any，直接使用Firebase的User类型，明确currentUser的可能值：

const [currentUser, setCurrentUser] = useState<User | null>(null);

完整修改后的AuthContext代码 #

import { createContext, useEffect, useState, PropsWithChildren } from 'react';
import { onAuthStateChanged, User } from 'firebase/auth';
import { auth } from '../firebase.config';

// 定义Context类型
interface AuthContextType {
  currentUser: User | null;
}

// 用正确类型初始化Context
export const UserContext = createContext<AuthContextType>({
  currentUser: null
});

export const AuthContextProvider = ({ children }: PropsWithChildren<{}>) => {
  // 明确useState的类型
  const [currentUser, setCurrentUser] = useState<User | null>(null);

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      console.log(user);
    });

    return () => unsub();
  }, []);

  return (
    <UserContext.Provider value={{ currentUser }}>
      {children}
    </UserContext.Provider>
  );
};

验证修改 #

现在在App组件中使用useContext(UserContext)时，TypeScript会正确识别currentUser的类型为User | null，不会再抛出属性不存在的错误。

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