在Next.js中无法从Mongoose对象获取_id属性的问题

问题诊断 #

你遇到的reservation._id返回undefined的情况，大概率是以下两个原因之一：

1. 前端状态变量与渲染变量不匹配 #

查看你的前端代码：

• 在useEffect中，你把请求到的数据存入了reservations状态（setReservations(data)）
• 但渲染时却用了data.map，而data只是请求函数内的局部变量，在渲染作用域中未定义，导致遍历的是undefined，自然reservation._id也是undefined。

2. Mongoose Document序列化问题 #

如果变量名没问题，那就是Mongoose查询返回的是Document实例而非普通JS对象，直接序列化后，_id可能以ObjectId对象形式存在，前端无法直接通过_id访问到字符串值。

解决方案 #

方案一：修正前端变量名 #

把渲染代码中的data.map改成reservations.map：

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

方案二：让Mongoose返回普通JS对象（推荐） #

在API的查询语句中添加.lean()，这样Mongoose会直接返回纯JS对象，_id会自动转为字符串：

const reservations = await Reservation.find({}).lean();

方案三：配置Schema的序列化规则 #

在你的Mongoose Schema中添加toJSON配置，强制把_id转为字符串：

const ReservationSchema = new Schema({
    name : {
       type:  String,
       required : true
    },
    status : {
       type:  Boolean,
       required : true
    },
    salle : {
       type:  Boolean,
       required : true
    },
    image : {
       type:  String,
       default: "/salle_mix.png"
    },
}, {
    toJSON: {
        transform: (doc, ret) => {
            ret._id = ret._id.toString();
            delete ret.__v; // 可选：移除不需要的__v字段
            return ret;
        }
    }
});

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