页面刷新后useQuery返回data为null的问题求助

问题根源 #

页面刷新后user变为null的核心原因是Firebase Auth初始化的异步特性：

• 页面刷新时，React组件会先于Firebase Auth完成初始化渲染，此时projectAuth.currentUser还未拿到登录用户的信息，是null/undefined。
• 你的getCurrentUser函数依赖projectAuth.currentUser，此时会直接返回null；同时React Query的queryKey用了projectAuth.currentUser?.email，初始值也是null，后续Auth完成初始化后，queryKey没有自动更新，导致React Query不会重新触发查询，直到数据标记为stale才会重新请求。

修复方案 #

1. 确保getCurrentUser能等待Auth初始化完成 #

修改获取用户的函数，通过onAuthStateChanged监听Auth状态，确保拿到初始化后的用户信息：

export async function getCurrentUser() {
  // 等待Firebase Auth完成初始化，获取当前用户实例
  const authUser = await new Promise((resolve) => {
    // 监听Auth状态变化，拿到用户后立即取消监听
    const unsubscribe = projectAuth.onAuthStateChanged((user) => {
      unsubscribe();
      resolve(user);
    });
  });

  if (!authUser) return null;
  // 获取用户的Token信息
  return authUser.getIdTokenResult();
}

2. 让React Query随Auth状态变化自动触发查询 #

在自定义Hook中监听Firebase Auth的用户状态变化，动态更新queryKey并控制查询的触发时机：

import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';

export function useCurrentUser() {
  // 保存当前Auth用户实例，监听状态变化
  const [authUser, setAuthUser] = useState(null);

  useEffect(() => {
    // 订阅Auth状态变化，更新本地状态
    const unsubscribe = projectAuth.onAuthStateChanged((user) => {
      setAuthUser(user);
    });
    // 组件卸载时取消订阅
    return unsubscribe;
  }, []);

  const { isLoading, data: user } = useQuery({
    // 用authUser的email作为queryKey的一部分，状态变化时自动重新查询
    queryKey: ["user", authUser?.email],
    queryFn: getCurrentUser,
    onError: (err) => console.log(err),
    // 只有当authUser存在时才触发查询，避免无效请求
    enabled: !!authUser,
  });

  return { isLoading, user };
}

额外说明 #

• onAuthStateChanged是Firebase Auth提供的可靠状态监听方法，能在页面刷新、登录/登出时实时触发状态更新，确保你能拿到最新的用户信息。
• React Query的enabled选项可以避免在没有用户时发起无效请求，queryKey的动态更新则能保证用户状态变化时自动重新获取数据，无需等待数据stale。

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