NextJS获取单个元素时id返回undefined问题求助

你的问题出在NextJS动态路由参数的获取方式和JSON Server不同，具体修正如下：

1. 修正参数获取逻辑 #

NextJS中，pages/api/events/[id].js这类动态路由的参数，直接存放在req.query的顶层属性里，而非req.query.params。你需要把代码里的req.query.params.id改成req.query.id。

另外注意：req.query.id是字符串类型，如果你的db.json里id是数字类型，直接用===全等比较会匹配失败，需要转成数字再比较。

修正后的代码：

const { events } = require('../../../db.json')

const handler = async (req , res) => {
    const method = req.method;
    // 修正参数获取+类型转换
    const evt = events.filter((ev) => ev.id === parseInt(req.query.id)); 

    if(method === 'GET'){
        // GET请求成功状态码用200，201是资源创建成功的状态码
        return res.status(200).json(evt);
    } else {
        res.setHeader('Allow', ['GET']);
        res.status(405).json({message:`Method ${method} is not allowed`})
    }
    
}

export default handler;

2. 为什么JSON Server可以正常工作？ #

JSON Server有自己的路由解析逻辑，它会把URL中的动态参数封装到req.params对象里，所以你访问/api/events/1时能通过req.params.id拿到值。但NextJS的API路由遵循自身规则，动态参数直接挂载在req.query上，这是两者的核心差异。

额外优化点 #

• GET请求成功时建议用200状态码，201通常用于POST请求创建资源成功的场景，更符合HTTP规范。
• 如果需要返回单个元素而非数组，可以用find代替filter：filter会返回匹配的所有元素组成的数组，find只返回第一个匹配的元素，更贴合"获取指定元素"的需求：

  const evt = events.find((ev) => ev.id === parseInt(req.query.id));
  

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