Next.js 13.4.19使用generateStaticParams生成动态路由时始终不返回404页面的问题

我来帮你解决这个问题！你遇到的情况其实是Next.js App Router中动态路由的默认行为导致的：当你使用generateStaticParams预生成部分路由时，默认情况下未预生成的路由会被动态渲染，而不是直接返回404页面——这就是为什么任何输入的URL都会被当作route参数传递给Page组件。

下面给你两种可行的解决方案，按需选择：

方案一：禁用动态参数匹配（推荐，适合静态场景） #

在你的./app/[route]/page.tsx中添加dynamicParams配置并设置为false，这样Next.js会只承认generateStaticParams返回的路由为有效路由，其他路由直接返回404：

export default function Page({ params }: { params: { route: string } }){
  const route = params.route ;

  return (
    <div>
      <h1>{`Statically Generated Route ${route}`}</h1>
    </div>
  );
}

export function generateStaticParams() {
  return [{route: 'one'}, {route: 'two'}, {route: 'three'}];
}

// 添加这行配置，禁用未预定义路由的动态匹配
export const dynamicParams = false;

方案二：在组件内校验参数（灵活，适合运行时校验场景） #

如果你需要更灵活的校验逻辑（比如允许的路由列表是动态获取的），可以在Page组件内部手动校验参数，当参数不在允许列表中时调用notFound()方法返回404：

import { notFound } from 'next/navigation';

const allowedRoutes = ['one', 'two', 'three'];

export default function Page({ params }: { params: { route: string } }){
  const route = params.route ;

  // 校验参数，不在列表中则返回404
  if (!allowedRoutes.includes(route)) {
    notFound();
  }

  return (
    <div>
      <h1>{`Statically Generated Route ${route}`}</h1>
    </div>
  );
}

export function generateStaticParams() {
  return [{route: 'one'}, {route: 'two'}, {route: 'three'}];
}

另外提个小细节：你代码里的Staticlly拼写应该是Statically，虽然不影响功能，但修正后更规范~

备注：内容来源于stack exchange，提问作者Blake Preston