Next.js电商网站下单后跳转订单页出现404且getServerSideProps中context.query.orderId返回null的问题求助

我帮你梳理下当前遇到的两个核心问题的根因，以及对应的修复方案：

1. 为什么查询订单返回null？ #

你在getServerSideProps里用了Order.findById({orderId: context.query.orderId})，这是错误的用法：

• Mongoose的findById()方法是专门用来查询MongoDB默认的_id字段的，它会把传入的参数当作_id的值去匹配，而非你自定义的orderId字段。
• 要查询自定义的orderId，应该用findOne()方法精准匹配字段。

修复代码： #

修改MyOrder.js中的查询逻辑：

export async function getServerSideProps(context) {
  if (!mongoose.connections[0].readyState) {
    await mongoose.connect(process.env.MONGO_URI);
  }
  // 替换findById为findOne，指定查询orderId字段
  let order = await Order.findOne({ orderId: context.query.orderId });
  console.log("got = ", order);
  return {
    props: { order: order ? JSON.parse(JSON.stringify(order)) : null },
  };
}

2. 为什么重定向后出现404错误？ #

这个问题有两个关键原因，需要逐个排查：

原因A：Next.js动态路由配置不匹配 #

你的订单页面是MyOrder.js，但如果要匹配/order/[orderId]这种动态路由：

• 如果是Pages Router，需要把文件结构改成pages/order/[orderId].js（将MyOrder.js重命名为[orderId].js，并放在order子目录下）。
• 如果是App Router，需要改成app/order/[orderId]/page.js。
  如果路由文件的命名或路径不对，Next.js找不到对应的页面组件，就会返回404。

原因B：Fetch请求未处理重定向 + 接口状态码错误 #

你在前端用fetch调用/api/addorder接口，但：

1. fetch默认不会自动跳转重定向：浏览器只会接收接口返回的重定向响应，但不会主动跳转到目标URL，需要手动处理。
2. 接口重定向状态码错误：你用了res.redirect(..., 200)，但200是成功响应码，重定向应该用3xx系列（比如302临时重定向）。

修复代码： #

第一步：修正接口的重定向状态码

修改/api/addorder.js中的重定向代码：

// 302是标准的临时重定向状态码，第一个参数为状态码，第二个为目标URL
res.redirect(302, '/order/' + orderToAdd.orderId);

第二步：前端Fetch请求处理重定向

修改Checkout页面的fetch调用逻辑：

// 示例fetch请求，根据你的实际参数调整
fetch('/api/addorder', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ /* 你的订单数据：配送信息、商品列表等 */ }),
})
.then(async (res) => {
  // 检查是否触发重定向
  if (res.redirected) {
    // 手动跳转到重定向的订单页面
    window.location.href = res.url;
    return;
  }
  // 处理其他响应情况（比如接口返回错误信息）
  const data = await res.json();
  console.log(data);
})
.catch((err) => {
  console.error('提交订单失败:', err);
});

额外调试建议 #

• 在/api/addorder.js中打印orderToAdd.orderId，确认生成的订单ID正确且已成功存入MongoDB。
• 在getServerSideProps中打印context.query.orderId，确认路由参数是否正确传递。

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