Next.js页面首次加载无法获取数据且触发Firebase文档引用错误怎么办？

错误原因分析 #

• window is not defined：即便加了"use client"，组件初始化阶段仍可能在服务器端运行，此时window对象尚未存在，直接访问会抛出错误。
• Firebase文档引用错误：首次加载时userId可能为空或未正确获取，导致Firestore文档引用格式错误（路径段数不符合要求）。

修复方案 #

1. 正确获取路由参数中的userId #

放弃通过window.location.pathname截取ID的方式，改用Next.js客户端路由钩子useRouter直接获取动态路由参数，这种方式更可靠，还能避免服务器端访问window的问题。

2. 精准控制useEffect执行时机 #

将userId加入useEffect的依赖数组，确保只有当userId有效时才触发数据获取逻辑；同时在函数内增加userId有效性判断，避免发起无效请求。

修改后的完整代码 #

"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { db } from "@/lib/firebaseConfig";
import { getDoc, doc } from "firebase/firestore";

function User() {
  const router = useRouter();
  // 从路由参数中直接获取id
  const { id: userId } = router.params;
  const [user, setUser] = useState({});

  useEffect(() => {
    // 只有userId存在时才执行数据获取
    if (!userId) return;
    
    const getUser = async () => {
      try {
        const docRef = doc(db, "users", userId);
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
          setUser(docSnap.data());
        } else {
          console.log("未找到该用户文档！");
        }
      } catch (err) {
        console.error("获取用户数据失败：", err);
      }
    };
    getUser();
  }, [userId]); // 依赖userId，变化时重新执行

  // 加载状态处理
  if (!userId) {
    return <div className="text-white">加载中...</div>;
  }

  return (
    <div>
      <h1 className="text-white">{userId}</h1>
      {user.image && <img src={user.image} alt="用户头像" />}
    </div>
  );
}

export default User;

关键改进点 #

• 用useRouter的params直接获取动态路由的id，无需手动截取路径，彻底规避服务器端访问window的问题。
• useEffect依赖数组加入userId，确保userId更新时自动重新触发数据请求。
• 增加userId有效性判断，防止生成无效的Firestore文档引用。
• 添加错误捕获和加载状态提示，提升调试效率和用户体验。

内容的提问来源于stack exchange，提问作者Walid Daniel Dib