Next.js 13获取单个Firestore文档为何出现多次读取？

你现在的代码里，至少有两次主动触发的文档读取：

• generateMetadata 里调用了一次 getVehicle
• 页面组件 VehicleGroup 又单独调用了一次 getVehicle
  这俩是完全独立的调用，自然会产生两次Firestore读取。

再加上Next.js开发环境默认开启React严格模式，它会强制组件和异步函数重复执行一遍（用来检测潜在的副作用问题），这就把原本的两次读取翻倍成四次。要是页面还有其他额外的渲染触发（比如组件重新挂载、状态更新），次数还会往上飘，这就是你看到2-8次波动的原因。

1. 给数据获取加缓存 #

直接用React的cache函数把getVehicle包起来，相同参数的多次调用只会发起一次Firestore请求：

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

export default cache(async function getVehicle(vehicleid) {
  const docRef = doc(db, "vehiclePosts", vehicleid);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    console.log("Document data exists:");
    return docSnap.data();
  } else {
    console.log("Document data doesn't exists:");
  }
});

2. 生产环境自动减少重复 #

部署到生产环境后，React严格模式的重复执行会自动关闭，加上缓存生效，读取次数就会稳定在1次/请求。

3. 排查额外渲染（若生产环境仍有问题） #

要是生产环境还是出现多次读取，检查组件是否存在不必要的重新渲染：

• 确认组件的props是否频繁变化
• 确保数据获取函数只在组件顶层调用，不要放在渲染逻辑里重复执行

修改完成后，控制台日志只会打印一次，Firestore的读取统计也会回到预期的1次。

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