React集成Firebase时AuthProvider导致应用白屏问题求助

你的应用在添加AuthContextProvider后崩溃空白，主要是以下几个问题导致的：

1. useEffect 触发无限循环 #

你的useEffect没有设置依赖项数组，这会导致组件每次渲染时都重新订阅onAuthStateChanged，而setUser又会触发组件重新渲染，形成无限循环，最终导致应用卡死崩溃。

修复方法：给useEffect添加空依赖数组[]，让它只在组件挂载时执行一次：

useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
        setUser(currentUser)
    });
    return () => {
        unsubscribe();
    }
}, []) // 添加空数组依赖，限制仅挂载时执行

2. logIn 函数参数拼写错误 #

logIn函数里的参数写成了passwored，正确拼写应为password，这个错误会导致调用登录功能时传参失败：

function logIn(email, password) { // 修正拼写错误
    return signInWithEmailAndPassword(auth, email, password)
}

3. AuthContext.Provider 遗漏必要方法 #

你在AuthContext.Provider的value里只传入了signUp和user，但定义好的logIn和logOut没有包含进去，如果后续组件需要调用这些方法会抛出错误，建议补上：

return (
    <AuthContext.Provider value={{signUp, logIn, logOut, user }}>
        {children}
    </AuthContext.Provider>
)

完整修正后的 AuthContext 代码 #

import { createContext, useContext, useEffect, useState } from "react";
import { auth } from "../firebase";
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "firebase/auth";

const AuthContext = createContext();

export function AuthContextProvider({children}) {

    const [ user, setUser ] = useState({})

    function signUp(email, password) {
        return createUserWithEmailAndPassword(auth, email, password)
    }

    function logIn(email, password) {
        return signInWithEmailAndPassword(auth, email, password)
    }

    function logOut() {
        return signOut(auth)
    }

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser)
        });
        return () => {
            unsubscribe();
        }
    }, [])

    return (
        <AuthContext.Provider value={{signUp, logIn, logOut, user }}>
            {children}
        </AuthContext.Provider>
    )
}

export function UserAuth() {
    return useContext(AuthContext)
}

另外，建议打开浏览器开发者工具控制台（F12）查看具体报错信息，这会帮你更快定位问题——比如无限循环会触发过多重渲染的警告，拼写错误会有参数不匹配的报错。

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