Next.js 13中Firestore单文档读取被计为多次的问题求助

首先明确：传递整个item对象给子组件不会直接导致Firestore读取次数增加，因为数据已经在服务器端的page组件中完成读取，props传递只是内存内的数据传递，不会触发新的Firestore请求。你的读取次数异常应该是其他原因导致的，以下是排查和解决步骤：

可能的原因及排查方向 #

• 开发模式热重载导致重复执行：Next.js 13开发模式下，代码变更或页面切换会触发热重载，page组件可能被多次执行，进而重复调用getItem发起Firestore请求。
  • 排查方式：在getItem函数中添加日志（console.log('读取文档ID:', itemid)），查看控制台日志的输出次数，对比Firestore的读取计数。
• 项目中存在其他Firestore读取操作：检查项目内所有使用getDoc/getDocs/onSnapshot的地方，确认是否有布局组件（layout.js）、子组件（比如HeadTitle）或其他逻辑在重复发起读取请求。
• Firestore请求未被缓存：Next.js服务器组件默认会缓存数据，但如果请求没有被正确缓存，可能导致重复读取。
• Firestore控制台查看详情：在Firebase控制台的「Firestore > 使用情况 > 读取次数」中，查看具体请求的文档路径、请求时间，确认是否是同一文档被多次读取，或是有其他意外的读取操作。

具体解决措施 #

1. 给getItem添加缓存：使用React的cache函数确保相同ID的文档只会被读取一次，避免重复请求：

import { doc, getDoc } from "firebase/firestore/lite";
import { db } from "../firebase";
import { cache } from 'react';

export const getItem = cache(async function getItem(itemid) {
  const docRef = doc(db, "itemPosts", itemid);
  const docSnap = await getDoc(docRef);
  return docSnap.data();
});

2. 验证生产模式表现：开发模式的热重载会产生额外的请求，构建项目后启动生产服务器，查看Firestore读取次数是否恢复正常：

npm run build
npm start

3. 排查组件重复渲染：检查子组件（如HeadTitle）是否存在异步请求逻辑，或是在客户端意外触发了Firestore调用。

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