页面加载时用useEffect从Firestore加载数据的问题求助

核心思路 #

先等待uid和路由参数id都就绪后再执行逻辑，避免初始值undefined导致的误跳转；同时分阶段处理不同状态（未登录、参数缺失、文档不存在、文档正常）的路由与数据加载逻辑。

具体实现步骤 #

1. 监听必要依赖，等待数据就绪

   • 在useEffect中同时监听Firebase Auth的用户状态（user）和路由参数router.query.id，确保只有当两者都存在时才执行后续逻辑。
   • 若user不存在（未登录），直接跳转到根路径/；若user存在但id未就绪，不执行任何跳转，等待参数加载完成。

2. 分情况处理文档查询与跳转

   • 当uid和id都存在时，调用Firestore API查询对应文档。
   • 若文档不存在，跳转到/main；若文档存在，将数据存入store触发页面重渲染。
   • 跳转前判断当前路径，避免重复跳转导致的无限循环。

完整代码示例 #

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth, db } from '../firebase/config'; // 你的Firebase配置路径
import { doc, getDoc } from 'firebase/firestore';
import { useDispatch } from 'react-redux'; // 假设用Redux作为store
import { setDocumentData } from '../store/slices/documentSlice'; // 你的store action

const HomePage = () => {
  const router = useRouter();
  const [user] = useAuthState(auth);
  const dispatch = useDispatch();
  const { id } = router.query;

  useEffect(() => {
    // 未登录：跳转到根路径
    if (!user) {
      if (router.pathname !== '/') {
        router.push('/');
      }
      return;
    }

    // 已登录但路由参数id未就绪：等待参数加载
    if (!id) {
      return;
    }

    // 已登录且id就绪：查询Firestore文档
    const fetchDocument = async () => {
      const docRef = doc(db, 'your-collection-name', `${user.uid}-${id}`); // 你的文档路径规则
      const docSnap = await getDoc(docRef);

      if (!docSnap.exists()) {
        // 文档不存在：跳转到/main
        if (router.pathname !== '/main') {
          router.push('/main');
        }
        return;
      }

      // 文档存在：存入store
      dispatch(setDocumentData(docSnap.data()));
    };

    fetchDocument();
  }, [user, id, router, dispatch]);

  // 加载状态提示（可选）
  if (!user || !id) {
    return <div>加载中...</div>;
  }

  // 页面渲染逻辑
  return <div>你的页面内容</div>;
};

export default HomePage;

关键细节说明 #

• 使用react-firebase-hooks/auth的useAuthState监听用户状态，省去手动监听Auth变化的繁琐操作。
• 跳转前判断当前路径（router.pathname），防止组件重渲染引发的重复跳转。
• 在user或id未就绪时显示加载状态，优化用户等待体验。

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