Next.js+MongoDB项目访问/location/[id]动态页getStaticPaths报错问询

错误原因 #

• Next.js动态路由的参数名由路由文件名决定，你当前的页面路径为/location/[id]，要求getStaticPaths返回的paths数组中，每个条目的params字段必须包含名为id的参数。
• 你当前代码里params定义的参数名为destinationId，和路由要求的id不匹配，因此系统检测不到必填的id参数，抛出该错误。

解决方法 #

修改getStaticPaths中映射返回的参数键名，将destinationId替换为id即可，修改后的代码如下：

export async function getStaticPaths(){
    const client = await MongoClient.connect(''); // 此处填写MongoDB用户名、密码、数据库名等连接信息
    const db = client.db();
   
    const destinationsCollection = db.collection('destination');
    const destinations = await destinationsCollection.find({},{_id: 1}).toArray();
    client.close();
    return {
        fallback: false,
        paths: destinations.map((destination) => ({ 
            params: { id: destination._id.toString() }
        })),     
    };
}

提示：如果你的getStaticProps方法中是通过params.destinationId获取参数的，需要同步修改为params.id，避免后续出现参数读取失败的问题。

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