配置AuthContext时遭遇TypeScript类型不兼容错误求助

TypeScript 报错的核心原因是AuthContext 的初始类型定义与 Provider 实际提供的值类型不匹配：

• 初始上下文定义中 currentUser 被推断为仅 null 类型，但 Provider 中实际是 User | null
• 初始上下文的方法（login/signup/logout）被推断为返回 void，但 Firebase 相关方法实际返回 Promise

修复步骤 #

1. 显式定义 AuthContext 的类型接口，匹配 Provider 实际提供的值结构
2. 确保上下文初始值符合该接口类型

修正后的完整代码 #

import React, { useContext, useState, useEffect } from "react";
import { auth, db } from "@inter/helpers/firebase";
import {
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  User,
  UserCredential // 新增导入
} from "firebase/auth";
import { doc, setDoc, getDoc } from "firebase/firestore";

// 1. 定义上下文类型接口
interface AuthContextType {
  currentUser: User | null;
  login: (email: string, password: string) => Promise<UserCredential>;
  signup: (email: string, password: string) => Promise<UserCredential>;
  logout: () => Promise<void>;
}

// 2. 使用接口创建上下文，并提供符合类型的初始值
const AuthContext = React.createContext<AuthContextType>({
  currentUser: null,
  login: async () => { throw new Error("Login must be used within AuthProvider"); },
  signup: async () => { throw new Error("Signup must be used within AuthProvider"); },
  logout: async () => { throw new Error("Logout must be used within AuthProvider"); },
});

export function useAuth() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }:{children:React.ReactNode}) {
  const [currentUser, setCurrentUser] = useState<null | User>(null);
  const [loading, setLoading] = useState(true);

  function signup(email:string, password:string) {
    return createUserWithEmailAndPassword(auth, email, password);
  }

  function login(email:string, password:string) {
    return signInWithEmailAndPassword(auth, email, password);
  }

  function logout() {
    return signOut(auth);
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    login,
    signup,
    logout,
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

关键说明 #

• 显式类型接口确保上下文的类型与 Provider 实际值完全对齐
• 初始上下文的方法返回带错误提示的 Promise，避免在未包裹 Provider 时误用
• 所有类型定义严格匹配 Firebase API 的返回值类型

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