在Next.js中使用getStaticProps时Firebase Firestore数据无法渲染

问题描述 #

尝试使用Next.js的getStaticProps从Firebase Firestore中获取数据。不使用getStaticProps时数据可正常渲染，但使用时出现以下错误：
res.json() is not a function

用户提供的代码：

import React from 'react';
import { db } from '@/firebase';
import { collection, getDocs } from 'firebase/firestore';

 
export const getStaticProps = async () => {
    const res = await getDocs(collection(db, 'blogs'));
    const data = await res.json();

    return {
        props: {
            blogs: data
        }
    }
}

function index({blogs}) {
  return (
    <div>
        {blogs.map(blog => {
            <p>{blog.title}</p>
        })}
    </div>
  )
}

export default index

问题根源 #

你混淆了Firestore SDK方法和HTTP请求的处理逻辑：

• getDocs 是Firebase Firestore提供的SDK方法，它返回的是QuerySnapshot对象，用于封装查询到的文档集合，根本不是HTTP请求的响应对象（比如fetch返回的Response），所以不存在json()方法，调用它自然会报错。

修正后的代码 #

import React from 'react';
import { db } from '@/firebase';
import { collection, getDocs } from 'firebase/firestore';

export const getStaticProps = async () => {
    const querySnapshot = await getDocs(collection(db, 'blogs'));
    // 遍历快照中的文档，提取数据和文档ID
    const blogs = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
    }));

    return {
        props: {
            blogs
        }
    }
}

function index({blogs}) {
  return (
    <div>
        {blogs.map(blog => (
            // 必须添加key属性，满足React列表渲染要求
            <p key={blog.id}>{blog.title}</p>
        ))}
    </div>
  )
}

export default index

关键修正点 #

1. 正确处理Firestore查询结果：使用querySnapshot.docs获取所有文档实例，通过doc.data()提取文档的实际数据，同时带上doc.id（文档的唯一标识）。
2. 修复组件渲染问题：原代码中map回调使用大括号{}但没有返回元素，改成小括号()会自动返回JSX元素，也可以显式添加return语句。
3. 添加列表key属性：React要求列表中的每个元素必须有唯一的key，这里用文档ID作为key最合适。

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