NextJS中Firestore对象db有时未定义的问题排查

核心问题 #

1. uid 参数未就绪
   Next.js 的 router.query 在页面初始化阶段可能还未完成参数解析，此时 uid 为 undefined。将 undefined 传入 Firestore 的 collection 函数会导致路径构造异常，触发你看到的“n is undefined”错误。

2. useEffect 依赖缺失
   你的 useEffect 依赖数组为空，即使后续 uid 被正确获取，也不会重新触发数据请求，导致页面无法加载数据。

3. JSX 语法错误
   组件返回的 JSX 缺少容器元素包裹列表，且 post.title 未使用大括号读取变量，这会导致渲染失败。

修正后的代码 #

import { useRouter } from 'next/router'
import { useState, useEffect } from 'react';
import { collection, getDocs } from "firebase/firestore";
import { db } from '../lib/firebase';

export default function Posts(){
  const [queriedData, setQueriedData] = useState([]);
  const router = useRouter()
  const { uid } = router.query

  useEffect(() => {
    // 确保uid存在再执行请求
    if (!uid) return;

    async function fetchData() {
      try {
        const postsRef = collection(db, "users", uid, "posts");
        const snapshot = await getDocs(postsRef);
        const postData = snapshot.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id
        }));
        setQueriedData(postData);
      } catch (error) {
        console.error('加载帖子失败:', error);
      }
    }
    fetchData();
  }, [uid]); // 监听uid变化，自动重新请求数据
  
  return(
    <div>
      {queriedData.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

额外优化点 #

• 添加 try/catch 捕获请求错误，方便调试排查
• 给列表项添加唯一 key 属性，符合 React 渲染规范
• 先校验 uid 有效性，避免无效的 Firestore 请求

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