Next.js+MongoDB开发时API返回数组如何改为返回单个对象

MongoDB 中 find() 方法无论匹配到多少条数据，都会统一返回数组格式的结果，哪怕仅匹配到1条文档，也会包裹为 [{}] 结构，和你的预期不符。

直接在接口层返回单个对象，符合接口设计规范，改动如下：

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const {
    method,
    query: { slug },
  } = req;

  if (req.method !== 'GET') {
    // 补充非GET请求的返回逻辑，避免请求挂起
    return res.status(405).json({ message: 'Method Not Allowed' });
  }

  await dbConnect();

  // 把find替换为findOne，直接返回匹配的单个文档对象，无匹配则返回null
  const selectedEvent = await Events.findOne({
    slug: slug,
  });

  if(!selectedEvent) {
    // 补充空数据处理，返回404状态码
    return res.status(404).json({ message: 'Event not found' });
  }

  res.status(200).json(selectedEvent);
};

export default handler;

修改后接口会直接返回单个 {} 格式的事件数据，前端SWR请求拿到的data就是目标对象，无需额外处理。

如果暂时不想修改后端代码，也可以在前端直接取数组的第一项拿到目标对象：

// 取数组索引0的元素即为单个事件对象
const event = data?.[0]

该方案仅适合临时调试，不建议线上使用，不符合接口设计的语义规范。

findOne 匹配不到对应文档时会返回null，前端需要做好空值判断，避免渲染时报错。

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