可选链影响React Query异步函数缓存问题求助

一、为什么用可选链会导致页面刷新后需手动refetch？ #

页面刷新后，Firebase Auth需要一小段时间完成初始化，此时projectAuth.currentUser是初始状态的null。当你用可选链?.时，projectAuth.currentUser?.getIdTokenResult()会直接返回undefined，而await undefined相当于立即resolve出undefined，你的函数会直接返回null，React Query就把这个null缓存下来了。

等Firebase Auth初始化完成、currentUser变成有效登录用户时，React Query并不知道数据已经变化，所以必须手动点击refetch才会更新缓存。

二、不用可选链时如何避免类型错误？ #

核心是先判断currentUser的有效性，再调用方法，同时要确保等待Firebase Auth初始化完成，避免拿到初始的null。

优化后的getCurrentUser函数 #

export async function getCurrentUser() {
  // 先等待Firebase Auth完成状态初始化
  await projectAuth.authStateReady();
  
  const curUser = projectAuth.currentUser;
  // 明确判断用户是否存在，避免后续调用方法报错
  if (!curUser) return null;
  
  // 这里不用可选链，因为已经确认curUser不为null/undefined
  const tokenResult = await curUser.getIdTokenResult();
  return tokenResult;
}

额外优化：让React Query自动监听用户状态变化 #

如果想让用户登录/登出、页面刷新时自动更新缓存，可以在Hook里监听Firebase Auth的状态变化：

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

export function useCurrentUser() {
  const { isLoading, data: user, refetch } = useQuery({
    queryKey: ["user"],
    queryFn: getCurrentUser,
    onError: (err) => console.log(err),
  });

  useEffect(() => {
    // 监听用户状态变化，自动触发重新获取数据
    const unsubscribe = projectAuth.onAuthStateChanged(() => {
      refetch();
    });

    // 组件卸载时取消监听
    return unsubscribe;
  }, [refetch]);

  return { isLoading, user };
}

这样不管是页面刷新还是用户登录/登出，React Query都会自动更新缓存，无需手动操作。

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