Next.js 中的 Mongoose 对象：如何获取 _id 属性？

2024-03-18 00:46:03

从 Next.js 中的 Mongoose 对象中获取 _id 属性

作为一名资深的开发者，我经常会遇到技术问题，而其中最令人头疼的问题之一就是无法从 Next.js 中的 Mongoose 对象中获取 _id 属性。这篇文章将深入探讨这个问题，并为你提供详细的分步指南，让你能够轻松解决它，从而从数据库中访问文档的 _id。

理解问题

当尝试访问 Mongoose 对象的 _id 属性时，却得到 "undefined" 的结果，这通常表明数据尚未正确解析。这是因为 Next.js 使用服务器端渲染（SSR），它在服务端执行数据获取，并在将数据传递给客户端之前对其进行序列化。

解决方案

要解决此问题，需要在服务端获取数据后对 Mongoose 对象进行特殊处理。为此，可以使用 JSON.parse() 方法将对象转换为字符串，然后使用 mongoose.Types.ObjectId() 将其转换回 Mongoose 对象 ID。

步骤

1. 在 GET 函数中解析数据：

export const GET = async (request) => {
  try {
    await connectToDB();
    const reservations = await Reservation.find({});
    return new Response(JSON.stringify(reservations), { status: 200 });
  } catch (error) {
    console.error("Error fetching reservations:", error);
    return new Response("Failed to fetch all reservations", { status: 500 });
  }
};

2. 在客户端使用 JSON.parse() 解析数据：

useEffect(() => {
  const fetchReservations = async () => {
    const response = await fetch("/api/reservation");
    const data = JSON.parse(await response.text());
    setReservations(data);
  };
  fetchReservations();
});

3. 使用 mongoose.Types.ObjectId() 转换 _id：

return (
  <div className="flex flex-wrap justify-center gap-7">
    {data.map((reservation) => (
      <Reservation_Card
        key={mongoose.Types.ObjectId(reservation._id)}
        name={reservation.name}
        status={reservation.status}
        salle={reservation.salle}
        image={reservation.image}
      />
    ))}
  </div>
);