Next.js+TypeScript电商站点产品数据加载异常求助

可能的问题根源 #

• 路由参数类型不匹配：模拟数据中的产品ID如果是数字类型，但路由传递的是字符串，用===直接比较会导致匹配失败。
• 数据查找逻辑错误：查找产品时用错了属性名（比如把id写成productId），或者参数转换逻辑缺失。
• 静态生成路径不完整：如果用静态生成模式，generateStaticParams（App Router）或getStaticPaths（Pages Router）没有生成所有产品的对应路径，导致访问时无匹配数据。
• 跳转链接参数错误：商品卡片的跳转链接没有正确传递产品ID，导致详情页获取的参数无效。

具体解决方案 #

1. 统一路由参数与数据的类型匹配 #

Pages Router 示例（pages/product/[id].tsx）

import { GetStaticProps, GetStaticPaths } from 'next';
import { Product } from '../types';

// 你的模拟产品数据
const products: Product[] = [
  { id: 1, name: '商品A', price: 99 },
  { id: 2, name: '商品B', price: 199 },
];

export const getStaticPaths: GetStaticPaths = async () => {
  // 将数字ID转为字符串，匹配路由参数类型
  const paths = products.map(product => ({
    params: { id: product.id.toString() },
  }));

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  // 将路由参数转回数字，与模拟数据ID类型一致
  const productId = params?.id ? parseInt(params.id) : -1;
  const product = products.find(p => p.id === productId);

  if (!product) {
    return { notFound: true };
  }

  return { props: { product } };
};

export default function ProductPage({ product }: { product: Product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>价格：{product.price}元</p>
    </div>
  );
}

App Router 示例（app/product/[id]/page.tsx）

import { Product } from '@/types';
import { notFound } from 'next/navigation';

// 你的模拟产品数据
const products: Product[] = [
  { id: 1, name: '商品A', price: 99 },
  { id: 2, name: '商品B', price: 199 },
];

export async function generateStaticParams() {
  return products.map(product => ({
    id: product.id.toString(),
  }));
}

export default function ProductPage({ params }: { params: { id: string } }) {
  const productId = parseInt(params.id);
  const product = products.find(p => p.id === productId);

  if (!product) {
    notFound();
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>价格：{product.price}元</p>
    </div>
  );
}

2. 验证商品卡片的跳转链接 #

确保Link组件正确传递产品ID，避免参数错误：

import Link from 'next/link';
import { Product } from '../types';

export default function ProductCard({ product }: { product: Product }) {
  return (
    <Link href={`/product/${product.id}`}>
      <div className="card">
        <h3>{product.name}</h3>
        <p>{product.price}元</p>
      </div>
    </Link>
  );
}

3. 排查数据查找逻辑 #

检查模拟数据的字段名是否与查找逻辑一致，比如确认数据中的ID字段确实是id，而非_id或productId：

// 错误示例：数据字段是productId，却用id匹配
const product = products.find(p => p.id === productId);
// 正确示例：匹配数据实际字段
const product = products.find(p => p.productId === productId);

4. 动态处理未预生成路径（可选） #

如果产品数据较多或动态更新，可以开启fallback模式，让Next.js动态生成未预生成的页面：

// Pages Router 的 getStaticPaths 配置
export const getStaticPaths: GetStaticPaths = async () => {
  return { paths: [], fallback: true }; // 不预生成任何路径，按需动态生成
};

总结 #

核心问题大多源于路由参数与数据类型不匹配或查找逻辑的字段错误。先验证跳转链接的ID是否正确，再检查详情页的参数转换与数据匹配代码，就能解决初始的Cannot read properties of undefined错误和后续的“Product not found”问题。

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