React使用Firebase身份认证时console.log(user)返回null无法获取用户数据

安全阿岳

2026-10-6

问题原因

useEffect依赖配置错误
你将user加入了useEffect的依赖数组，而onAuthStateChanged回调内会修改user状态，会导致监听器被反复重复注册，引发状态更新异常。onAuthStateChanged本身是Firebase提供的长效登录状态监听器，仅需在组件挂载时注册一次即可。
未做登录状态判断直接跳转
onAuthStateChanged在用户未登录、登录态过期时回调参数都会返回null，你当前逻辑无论是否拿到有效用户都直接跳转到/chats页面，此时全局上下文存储的user自然为null。
缺少监听器清理逻辑
组件卸载时没有取消onAuthStateChanged的监听器，可能引发内存泄漏和无效的状态更新。

修复后代码

import React, { useContext, useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { auth } from '../firebase';

const AuthContext = React.createContext();

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

export function AuthProvider({ children }) {
    const [loading, setLoading] = useState(true);
    const [user, setUser] = useState(null);
    const history = useHistory();

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(user => {
            setUser(user)
            setLoading(false)
            // 仅有效登录状态下跳转
            if(user) {
                history.push('/chats')
            }
        })
        // 组件卸载时清理监听器
        return unsubscribe
    }, [history])

    const value = { user }

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