优化Next.js中Firestore数据读取：避免不必要的多次调用

import { doc, getDoc } from "firebase/firestore/lite";
import { db } from "../firebase"; // 假设这是你的Firestore实例

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

  if (docSnap.exists()) {
    console.log(`Document data exists for ID: ${vehicleid}`);
    return docSnap.data();
  } else {
    console.log(`Document data doesn't exist for ID: ${vehicleid}`);
    return null; // 返回null或抛出错误以表示未找到
  }
}

import getVehicle from '@/lib/getter'; // 导入数据获取函数

// 为页面生成元数据
export async function generateMetadata({ params: { vehicleid } }) {
  // 第一次调用 getVehicle
  const vehicle = await getVehicle(vehicleid);

  return {
    title: vehicle?.title || '车辆详情',
    description: vehicle?.description || '查看车辆详细信息',
    robots: {
      index: true,
      follow: true,
      nocache: false,
      googleBot: {
        index: true,
        follow: true,
        noimageindex: false,
      },
    },
  };
}

// 渲染车辆详情组件
export default async function VehicleGroup({ params: { vehicleid } }) {
  // 第二次调用 getVehicle
  const vehicleData = await getVehicle(vehicleid);

  if (!vehicleData) {
    return <div>车辆信息未找到。</div>;
  }

  return (
    <div>
      <h1>{vehicleData.title}</h1>
      <p>{vehicleData.description}</p>
      {/* 更多车辆详情展示 */}
    </div>
  );
}

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

// 使用 cache 包裹 getVehicle 函数
const getVehicleCached = cache(async (vehicleid) => {
  const docRef = doc(db, "vehiclePosts", vehicleid);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    console.log(`[Cached Fetch] Document data exists for ID: ${vehicleid}`);
    return docSnap.data();
  } else {
    console.log(`[Cached Fetch] Document data doesn't exist for ID: ${vehicleid}`);
    return null;
  }
});

export default getVehicleCached; // 导出缓存后的函数

import getVehicle from '@/lib/getter'; // 现在导入的是缓存后的函数

export async function generateMetadata({ params: { vehicleid } }) {
  const vehicle = await getVehicle(vehicleid); // 第一次调用，会执行实际的Firestore请求并缓存结果
  // ...
}

export default async function VehicleGroup({ params: { vehicleid } }) {
  const vehicleData = await getVehicle(vehicleid); // 第二次调用，会直接返回缓存的结果，不会再次请求Firestore
  // ...
}

// app/vehicle/[vehicleid]/page.js
import getVehicle from '@/lib/getter'; // 假设这里getVehicle没有使用cache

// 页面组件作为父级，统一获取数据
export default async function VehiclePage({ params: { vehicleid } }) {
  const vehicleData = await getVehicle(vehicleid); // 只在这里调用一次

  if (!vehicleData) {
    return <div>车辆信息未找到。</div>;
  }

  return (
    <>
      {/* 将数据传递给子组件 */}
      <VehicleGroup vehicle={vehicleData} />
    </>
  );
}

// 子组件 VehicleGroup (app/vehicle/[vehicleid]/VehicleGroup.js)
// 注意：这个组件不再需要自己获取数据
function VehicleGroup({ vehicle }) {
  return (
    <div>
      <h1>{vehicle.title}</h1>
      <p>{vehicle.description}</p>
      {/* 更多车辆详情展示 */}
    </div>
  );
}

// 导出 generateMetadata 仍然需要独立获取数据，除非你能从页面组件中传递
// 这种情况下，如果 generateMetadata 必须独立获取，那么 cache 方案更优
export async function generateMetadata({ params: { vehicleid } }) {
  const vehicle = await getVehicle(vehicleid); // 再次调用，如果getVehicle没有缓存，这里会重复
  return {
    title: vehicle?.title || '车辆详情',
    description: vehicle?.description || '查看车辆详细信息',
    // ...
  };
}