React Firebase Google认证刷新后无法获取用户的解决方案

问题根源 #

页面刷新时，Firebase Auth需要从本地缓存异步恢复用户会话，你的QuizHome组件只等待了数据加载完成，没等Auth状态初始化完毕就渲染页面，导致此时user还是null。

解决方案 #

1. 封装自定义Auth Hook（全局复用） #

创建一个useAuth.js文件，把Auth状态逻辑抽离出来，所有组件都能直接调用：

// src/hooks/useAuth.js
import { useState, useEffect } from "react";
import { auth } from "../firebase";
import { onAuthStateChanged } from "firebase/auth";

export const useAuth = () => {
  const [user, setUser] = useState(null);
  const [authLoading, setAuthLoading] = useState(true); // 新增Auth加载状态

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setAuthLoading(false); // Auth状态初始化完成
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return { user, authLoading };
};

2. 修改QuizHome组件，等待Auth和数据都加载完成 #

原来的loading只控制了数据加载，现在要结合authLoading，确保两者都就绪后再渲染页面：

// src/components/QuizHome.js
import React, { useEffect, useState } from "react";
import QuizCard from "./components/quiz-card";
import HomeLoading from "./components/home-loading";
import QuizHomeLayout from "./components/quiz-home-layout";
import { useAuth } from "../hooks/useAuth"; // 导入自定义Hook

const QuizHome = () => {
  const [homeData, setHomeData] = useState(null);
  const [dataLoading, setDataLoading] = useState(true);
  const { user, authLoading } = useAuth(); // 获取全局Auth状态

  async function fetchQuizData() {
    try {
      const res = await fetch(`https://storage.googleapis.com/kobello.appspot.com/home.json`);
      const serverHomeData = await res.json();
      setHomeData(serverHomeData);
    } catch (error) {
      console.error(error);
    } finally {
      setDataLoading(false); // 无论请求成功失败，都结束数据加载状态
    }
  }

  useEffect(() => {
    fetchQuizData();
  }, []);

  // 只要Auth或数据还在加载，就显示加载组件
  if (authLoading || dataLoading) {
    return <HomeLoading />;
  }

  return (
    <React.Fragment>
      <QuizHomeLayout user={user}>
        {homeData && homeData.map((data, key) => (
          <QuizCard key={key} data={data} />
        ))}
      </QuizHomeLayout>
    </React.Fragment>
  );
};

export default QuizHome;

3. 确保Firebase初始化正确 #

检查你的firebase.js配置文件，确保Auth模块正确初始化：

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 替换为你的Firebase配置信息
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app); // 必须正确初始化Auth实例

任意组件获取用户信息的方式 #

现在只要在需要的组件中导入useAuth Hook，就能随时获取用户状态：

// 示例：在Header组件中展示用户头像
import { useAuth } from "../hooks/useAuth";

const Header = () => {
  const { user } = useAuth();

  return (
    <header className="flex items-center justify-end p-4">
      {user ? (
        <img 
          src={user.photoURL} 
          alt="用户头像" 
          className="w-10 h-10 rounded-full border-2 border-gray-200"
        />
      ) : (
        <button className="px-4 py-2 bg-blue-500 text-white rounded">登录</button>
      )}
    </header>
  );
};

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