Next 13中传递tourId到API时undefined问题及解决方法

问题场景 #

点击“Tour Detail”按钮后，尝试通过动态路由传递tourId从MongoDB获取数据，但后端/api/getTours/${tourId}接口始终无法接收到tourId，终端日志显示Received tourId: undefined。前后端动态路由文件名均为[tourId]。

核心错误原因 #

在Next.js App Router的API路由中，动态路由参数不能通过req.params获取，需要从GET函数的第二个参数params对象中提取。原后端代码错误地使用req.params?.tourId，导致无法拿到正确的参数值。

解决方案 #

1. 修正后端API的参数获取逻辑 #

修改后端app/api/getTours/[tourId]/route.js中的GET函数，添加第二个参数{ params }，并从其中提取tourId：

import { NextResponse } from "next/server";
import { connectDb } from "../../../../lib/db";
import Tour from "../../../../models/tour";

// 新增第二个参数 { params }
export async function GET(req, { params }) {
  try {
    await connectDb();

    // 从params中获取正确的tourId
    const tourId = params.tourId;

    console.log("Received tourId:", tourId);

    if (!tourId) {
      return NextResponse.json(
        {
          message: "Invalid tourId parameter.",
        },
        { status: 400 }
      );
    }

    const tour = await Tour.findOne({ _id: tourId });

    console.log("Found tour:", tour);

    if (!tour) {
      return NextResponse.json(
        {
          message: "Tour not found.",
        },
        { status: 404 }
      );
    }

    return NextResponse.json(tour);
  } catch (error) {
    console.error("Error in GET request:", error);
    return NextResponse.json(
      {
        message: "An error occurred while fetching the tour details.",
      },
      { status: 500 }
    );
  }
}

2. 前端逻辑优化（可选） #

原前端useEffect中判断响应数据的逻辑有误：findOne返回单个对象而非数组，将response.data.length > 0改为直接判断response.data：

useEffect(() => {
  const fetchTourDetails = async () => {
    try {
      const response = await axios.get(`/api/getTours/${tourId}`);

      if (response.status === 200 && response.data) {
        setTour(response.data);
        setError(null);
      } else {
        setError("Failed to fetch tour details.");
      }
    } catch (error) {
      console.error("Error fetching tour details:", error);
      setError(`Error fetching tour details: ${error.message}`);
    }
  };

  fetchTourDetails();
}, [tourId]);

3. 额外检查项 #

• 若MongoDB中_id为ObjectID类型，需转换后查询：

  import mongoose from "mongoose";
  // ...
  const tour = await Tour.findOne({ _id: mongoose.Types.ObjectId(tourId) });
  

• 确保前端跳转路径/get/tours/${tour._id}与页面路由app/get/tours/[tourId]/page.js层级完全匹配。

验证修改 #

重启Next.js应用后，点击“Tour Detail”按钮，终端日志应能正确打印Received tourId: [实际ID值]，同时前端可正常展示tour详情。

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