Next.js无法从Firestore Collection获取有效数据求助

1. 优先检查Firestore安全规则 #

这是最常见的触发原因：Firestore默认安全规则要求用户必须完成认证才能读写数据。如果你的应用还未集成用户认证模块，读取请求会被规则拦截，最终表现为能获取到文档ID，但doc.data()返回空对象。

开发环境临时调试方案 #

前往Firebase控制台的Firestore数据库 -> 规则，将规则修改为允许products集合的公开读取（上线前务必改回严格权限规则）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /products/{product} {
      allow read: if true; // 允许所有人读取products集合
      allow write: if request.auth != null; // 写入操作仍需用户认证
    }
  }
}

修改完成后点击发布，刷新页面重新测试。

2. 添加错误捕获，定位请求异常 #

你的代码缺少错误处理逻辑，即使请求失败也无法看到具体报错信息。修改代码添加try/catch，同时打印单个文档的详细数据：

import React, { useEffect, useState } from 'react'
import {collection, getDocs} from 'firebase/firestore';
import db from '../firebase/config'

import { Box } from '@chakra-ui/react'
import ProductCard from './ProductCard'

const Products = () => {
    const [products, setProducts] = useState([])

    useEffect(() => {
        (async () => {
            try {
                const colRef = collection(db, 'products')
                const snapshots = await getDocs(colRef)
                const docs = snapshots.docs.map((doc) => {
                    const data = doc.data()
                    // 打印单个文档的详细信息，排查data是否为空
                    console.log(`文档ID: ${doc.id}，文档数据:`, data)
                    data.id = doc.id
                    return data
                })

                setProducts(docs)
                console.log("最终处理后的产品数据:", docs)
            } catch (error) {
                // 打印请求错误，快速定位问题
                console.error("获取Firestore数据失败:", error)
            }
        })()
    }, [])

    return (
        <Box>
            {products.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </Box>
    )
}

export default Products

运行后查看控制台：

• 如果出现权限相关错误，直接回到安全规则调整即可。
• 如果单个文档的data为空，需再次确认数据库中文档的字段是否存在（你的截图显示字段正常，此情况概率较低）。

3. 验证Firebase配置与集合名称 #

• 确认firebase/config.js中的projectId与Firebase控制台的项目ID完全一致，避免连接到错误的数据库实例。
• 检查集合名称大小写：Firestore集合名称区分大小写，确保代码中的'products'与数据库中的集合名称完全匹配（你的截图显示集合名为products，可快速核对）。

4. 检查Firebase SDK版本兼容性 #

如果Next.js版本与Firebase SDK版本存在兼容性问题，可能导致数据解析异常。尝试更新Firebase相关依赖：

npm install firebase@latest

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