Next.js商品详情页URL显示正确ID但无法加载商品问题排查

问题根源 #

你的代码中Products.find匹配失败的核心原因是类型不匹配：
URL路由参数params.productid是字符串类型（所有URL参数默认都是字符串），而Products数组里的item.id大概率是数字类型。全等运算符===会同时校验值和类型，导致匹配不到对应商品，最终进入else分支显示"Product not found"。

修复代码 #

将params.productid转为数字后再进行匹配，修改后的完整代码如下：

import Container from "@/app/components/Container";
import ProductDetails from "./ProductDetails";
import Reviews from "./Reviews";
import { Products } from "@/utilities/Products";

interface Iparams {
  productid?: string;
}
const $Product = ({ params } : { params: Iparams }) => {
  // 处理参数可能为undefined的情况，无效id设为-1避免匹配到正常商品
  const productId = params.productid ? Number(params.productid) : -1;
  const productDetailsAllItems = Products.find((item) => item.id === productId);
  
  console.log("匹配到的商品：", productDetailsAllItems);
  return (
    <>
      <div className="h-full mt-[30px]">
        {productDetailsAllItems ? (
          <Container>
            <ProductDetails productProp={productDetailsAllItems}/>
            <Reviews productPropReview={productDetailsAllItems}/>
          </Container>
        ) : (
          <p className="text-center">Product not found</p>
        )}
      </div>
    </>
  );
};

export default $Product;

额外验证步骤 #

1. 打开@/utilities/Products文件，确认id字段的类型（数字/字符串）
2. 刷新页面后查看浏览器控制台，确认productDetailsAllItems是否输出预期的商品对象
3. 检查ProductDetails和Reviews组件是否正确处理传入的props（比如无解构错误）

内容的提问来源于stack exchange，提问作者Oxymoron.py