NextJS 14电商项目：通过Slug获取产品详情失败求助

我正在开发基于NextJS 14的电商网站，当前实现产品详情页功能，希望通过产品slug（比如链接http://localhost:3000/product/armchair-royal-shoulder-mb-ld-17中的armchair-royal-shoulder-mb-ld-17）获取对应产品数据。目前已成功获取params参数（日志显示params: {productSlug: 'sofa-maxine-m2-3c-da-mush-1141-vact8377'}），但调用API时返回错误：{success: false, message: 'Something went wrong! Please try again later'}。使用MongoDB存储数据，请求帮忙排查问题。

API路由代码（api/product/[productSlug]/route.js） #

import { connect } from "@/backend/config/mongodb";
import Product from "@/backend/models/Product";
import { NextResponse } from "next/server";

connect()

export async function GET(req, res) {
  try {
    const { productSlug } = req.params;
    const product = await Product.findOne({ slug: productSlug });

    if (product) {
      return NextResponse.json({
        success: true,
        data: product,
      });
    } else {
      return NextResponse.json({
        success: false,
        message: 'Product not found',
      });
    }
  } catch (error) {
    console.error(error);
    return NextResponse.json({
      success: false,
      message: 'Something went wrong! Please try again later',
    });
  }
}

页面组件代码（app/product/[productSlug]/page.jsx） #

'use client'
import ProductDetail from "@/app/components/product/ProductDetail"
import React, { useEffect, useState } from "react"

const ProductDetailsPage = ({ params }) => {
    console.log('🚀 ~ ProductDetailsPage ~ params:', params)

    const [product, setProduct] = useState(null);

    const getProductDetails = async () => {
        try {
            const res = await fetch(`http://localhost:3000/api/product/${params.productSlug}`,
                {
                    method: 'GET'
                }
            )
            console.log('🚀 ~ getProductDetails ~ res:', res)
            const data = await res.json()
            console.log('data: ', data)
            setProduct(data)
        } catch (error) {
            console.log("[productId_GET]", error);
        }
    }

    useEffect(() => {
        getProductDetails();
    }, [])

    return (
        <div>
            <ProductDetail product={product} />
        </div>
    )

}

export default ProductDetailsPage

日志信息 #

data:  {success: false, message: 'Something went wrong! Please try again later'}

🚀 ~ ProductDetailsPage ~ params: {productSlug: 'sofa-maxine-m2-3c-da-mush-1141-vact8377'}

排查方案 #

• 修正API参数获取逻辑：NextJS 14 App Router中，GET函数的参数为request和context，params需要从context.params获取，原代码中req.params是错误的。修改API路由代码：

  export async function GET(req, context) {
    try {
      const { productSlug } = context.params; // 改为context.params获取参数
      // 剩余逻辑不变
    } catch (error) {
      // 错误处理不变
    }
  }
  

• 查看服务器端错误日志：启动NextJS服务的终端会打印console.error(error)的内容，这是定位问题的核心，比如可能是参数未正确获取、数据库连接失败、模型字段不匹配等。
• 验证MongoDB数据匹配：检查MongoDB中产品文档的slug字段值是否和传入的productSlug完全一致，注意大小写、特殊字符、是否有多余空格。
• 优化客户端请求路径：客户端fetch使用相对路径/api/product/${params.productSlug}代替硬编码的http://localhost:3000，避免环境切换时的问题。
• 确认数据库连接有效性：在connect()函数中添加日志，或者在API路由的try块中先打印数据库连接状态，确保连接成功。

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