NextJS中使用getServerSideProps结合动态路径从MongoDB获取用户数据的问题咨询

问题场景 #

我尝试在NextJS中使用getServerSideProps结合动态路径（路径示例：http://localhost:3000/p/[userID]）从MongoDB数据库获取用户数据，当前硬编码userID（例如'S7L4SU'）时能成功获取单个用户的数据，但尝试动态获取userID时总是报错。以下是我的代码：

import dbConnect from 'lib/dbConnect'
import User from 'models/User'
export default function refID({user}){
 return( <> <p>USERID:{user.userID}</p> <p>USERNAME:{user.userName}</p> </> );
}
export async function getServerSideProps({ params }) {
 await dbConnect()
 const user = await User.findOne({userID}).lean()
 user._id = user._id.toString()
 return { props: { user } }
}

请问如何正确定义动态userID，实现通过不同路径获取对应用户的数据？

解决方案 #

你已经走对了大部分流程，问题核心是没有正确从动态路由的params对象中提取userID参数。下面是修正后的完整代码和关键说明：

修正后的代码

import dbConnect from 'lib/dbConnect'
import User from 'models/User'

export default function refID({ user }) {
  return (
    <>
      <p>USERID:{user.userID}</p>
      <p>USERNAME:{user.userName}</p>
    </>
  );
}

export async function getServerSideProps({ params }) {
  await dbConnect();
  
  // 1. 从动态路由参数中解构出userID
  const { userID } = params;
  
  // 2. 使用动态获取的userID查询数据库
  const user = await User.findOne({ userID }).lean();

  // 3. 处理用户不存在的情况，避免渲染报错
  if (!user) {
    return {
      notFound: true, // Next.js会自动渲染404页面
    };
  }

  // 将MongoDB的ObjectId转换为字符串，解决序列化问题
  user._id = user._id.toString();
  return { props: { user } };
}

关键修改点说明

1. 提取动态路由参数：
   你的动态路由文件是[userID].js，所以Next.js会把URL中/p/后面的部分封装到params.userID里。通过const { userID } = params;就能拿到当前请求的用户ID，替代之前硬编码的固定值。

2. 查询数据库：
   在findOne({ userID })中，这里的userID就是从路由参数中动态获取的值，等价于{ userID: userID }，这样就能匹配数据库中对应用户的数据了。

3. 异常处理：
   新增了if (!user)的判断，如果数据库中没有找到对应userID的用户，返回notFound: true，让Next.js渲染404页面，避免因为user为null导致组件渲染时出现Cannot read properties of null的错误。

额外注意事项

• 确保你的User模型中确实存在userID字段，并且字段值和URL中的参数格式完全一致（比如大小写、特殊字符等）。
• 如果你的动态路由文件名是[id].js而不是[userID].js，那就要从params.id中提取参数，参数名必须和文件名方括号内的名称一致。

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