NextJS 14使用generateStaticParams()时无法显示404页面

错误原因 #

当使用output: export配置静态导出时，Next.js会预渲染所有generateStaticParams返回的路径。如果访问的Slug不在预渲染列表中（比如/test），静态站点没有服务器端逻辑动态处理请求，就会抛出missing param错误，而非触发404页面。同时你当前的代码仅检查Slug是否为空，未校验Slug对应的资源是否存在，导致无效Slug无法触发404。

解决方案 #

1. 校验Slug对应的资源是否存在 #

修改页面组件，获取Slug后检查其是否存在于产品列表中，不存在则调用notFound()：

import { PRODUCTS } from "@/data/data";
import DetailsPage from '@/components/PDP/page';
import { notFound } from 'next/navigation';

export async function generateStaticParams() {
  const products = await PRODUCTS;
 
  return products.map((product) => ({
    slug: product.slug,
  }))
}

async function DetailsPageWrapper({ params }: { params: { slug: string } }) {
  const { slug } = params;
  const products = await PRODUCTS;
  // 查找对应Slug的产品
  const targetProduct = products.find(product => product.slug === slug);

  // 产品不存在则触发404
  if (!targetProduct) {
    notFound();
  }

  return (
    <DetailsPage slug={slug} />
  );
}

export default DetailsPageWrapper;

2. 创建自定义404页面 #

在app目录下创建404.tsx文件，定义静态导出模式下的404页面内容：

export default function NotFound() {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>404 - 页面不存在</h1>
      <p>你访问的页面不存在，请检查路径是否正确。</p>
    </div>
  );
}

3. 构建验证 #

重新执行静态导出命令（next build && next export），构建完成后：

• 所有generateStaticParams返回的有效Slug会被预渲染为静态页面
• 访问无效Slug时，静态站点会加载你自定义的404.tsx页面

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