Next.js 13页面加载时Firebase Firestore接口被多次调用问题求助

核心原因 #

Next.js 13的渲染机制（尤其是App Router）可能导致组件多次渲染，加上未对Firestore请求做缓存，就会出现同一请求被重复触发的情况。以下是具体解决方案：

1. 给getVehicle函数添加缓存（推荐） #

利用Next.js的unstable_cache（Next.js 13.4+可使用稳定版cache函数）包裹数据获取逻辑，确保相同vehicleid的请求只执行一次，后续直接读取缓存。

修改lib/getVehicle.js：

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

const fetchVehicle = async (vehicleid) => {
  const docRef = doc(db, "vehiclePosts", vehicleid);
  try {
    const snap = await getDoc(docRef);
    if (snap.exists()) {
      return snap.data();
    }
    console.log("文档不存在");
    return null;
  } catch (err) {
    console.error("获取文档失败:", err);
    return null;
  }
};

// 按vehicleid缓存，24小时后自动重新验证（可按需调整时长）
export default unstable_cache(fetchVehicle, ["vehicle"], {
  revalidate: 86400,
});

2. 规范组件中函数的调用方式 #

服务器组件（App Router） #

确保在组件顶层异步调用getVehicle，不要在渲染逻辑（如JSX内、循环代码中）嵌套调用：

// app/vehicles/[id]/page.js
import getVehicle from "@/lib/getVehicle";

export default async function VehiclePage({ params }) {
  // 仅在组件顶层调用，只会执行一次
  const vehicle = await getVehicle(params.id);

  return (
    <div>
      {vehicle && <h1>{vehicle.name}</h1>}
    </div>
  );
}

客户端组件 #

使用useSWR或react-query这类数据缓存库，避免组件重渲染时重复发起请求：

"use client";

import useSWR from "swr";
import getVehicle from "@/lib/getVehicle";

export default function VehicleCard({ vehicleId }) {
  // 按vehicleid缓存请求
  const { data: vehicle } = useSWR(["vehicle", vehicleId], () => getVehicle(vehicleId));

  if (!vehicle) return <div>加载中...</div>;

  return <div>{vehicle.name}</div>;
}

3. 避免循环渲染中的重复请求 #

如果在列表组件中循环调用getVehicle，请将数据请求逻辑提到父组件，一次性获取所有需要的数据，再传递给子组件，避免每个子组件单独发起请求：

// 父组件（服务器组件）
import getVehicle from "@/lib/getVehicle";

export default async function VehicleList({ vehicleIds }) {
  // 一次性批量获取所有车辆数据
  const vehicles = await Promise.all(vehicleIds.map(id => getVehicle(id)));

  return (
    <div>
      {vehicles.map((vehicle, idx) => (
        <VehicleCard key={idx} vehicle={vehicle} />
      ))}
    </div>
  );
}

// 子组件
export default function VehicleCard({ vehicle }) {
  return <div>{vehicle.name}</div>;
}

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