在Next.js中使用getStaticProps获取Firestore信息失败，求排查

问题根源 #

你收到的TypeError: querySnapshot is not a function错误，是因为**querySnapshot是getDocs返回的QuerySnapshot对象，不是可调用的函数**，但你在return的props里写了querySnapshot()，相当于尝试执行一个对象，自然会报错。

另外还有个隐藏问题：就算你去掉括号直接传querySnapshot给blogs，组件里的blogs.map也会报错——因为QuerySnapshot本身不是数组，没法直接用map遍历。

修正后的代码 #

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'));
    
    // 把QuerySnapshot里的文档转换成带数据和id的数组
    const blogs = querySnapshot.docs.map(doc => ({
        ...doc.data(), // 展开文档的所有数据字段
        id: doc.id     // 可选，需要用到文档ID的话加上这行
    }));

    // 原有的日志打印可以保留
    querySnapshot.forEach((doc) => {
        console.log(doc.id, " => ", doc.data().title);
    });
    
    return {
        props: {
            blogs // 直接传转换好的数组给组件
        }
    }
}

function index({blogs = []}) {
  return (
    <div>
        {blogs.map(blog => (
            <p key={blog.id}>{blog.title}</p> {/* 加上key属性避免React警告 */}
        ))}
    </div>
  )
}

export default index

关键修改点 #

1. 删掉querySnapshot()的括号，改为传递转换后的blogs数组；
2. 用querySnapshot.docs.map()把每个文档的数据提取出来，组装成组件能直接遍历的数组；
3. 给map渲染的元素加上key属性，符合React的列表渲染规范；
4. 给组件的blogs参数设置空数组默认值，避免数据加载异常时出现报错。

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