React TS项目Promise<UserCredential>类型不兼容报错如何解决

报错根因 #

报错核心是创建AuthContext时register字段的默认值定义错误：

• 代码里写的register: Promise是将JS内置的Promise构造函数作为默认值，TypeScript自动推导该字段类型为PromiseConstructor
• 但实际传入Provider的register是接收email、password两个字符串参数，返回Promise<UserCredential>的异步函数，二者类型完全不兼容，因此抛出类型错误。
  另外代码存在语义命名问题：给Context Provider定义的props类型命名为ButtonProps，和实际用途完全不匹配。

修复要点 #

1. 从firebase/auth导入所需类型：User（当前登录用户类型）、UserCredential（注册/登录方法返回值类型）
2. 显式定义Auth上下文的TypeScript接口，明确每个字段的类型，不依赖默认值自动推导类型
3. 创建Context时传入符合类型定义的兜底默认值，不要把Promise构造函数作为默认值
4. 修正Provider的props类型命名，给存储currentUser的state加上正确的类型标注
5. 补充Firebase Auth自带的登录状态监听逻辑，否则currentUser会永远为null，认证功能无法正常运行

修复后完整代码 #

import React, {createContext, useContext, useEffect, useState, ReactNode} from "react";
import { auth } from '../utils/init-firebase';
import { createUserWithEmailAndPassword, User, UserCredential } from "firebase/auth"

// 修正props命名，和实际用途匹配
type AuthProviderProps = {
    children: ReactNode;
}

// 显式定义Context的类型结构
type AuthContextType = {
    currentUser: User | null;
    register: (email: string, password: string) => Promise<UserCredential>;
}

// 创建Context时显式指定泛型类型，传入符合类型要求的兜底默认值
const AuthContext = createContext<AuthContextType>({
    currentUser: null,
    register: () => Promise.reject(new Error("AuthContext 未在Provider范围内初始化")),
})

export const useAuth = () => useContext(AuthContext);

export default function AuthContextProvider( { children}  : AuthProviderProps){
    // 给state添加正确的类型标注
    const [currentUser, setCurrentUser] = useState<User | null>(null);

    // 注册方法实现
    function register(email: string, password:string) {
        return createUserWithEmailAndPassword(auth, email, password)
    }

    // 监听登录状态变化，同步更新currentUser
    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(user => {
            setCurrentUser(user)
        })
        // 组件卸载时取消监听，防止内存泄漏
        return unsubscribe
    }, [])
    
    const value = {
        currentUser,
        register,
    }
    
    return <AuthContext.Provider value={value}>
        {children}
    </AuthContext.Provider>
}

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