NextJS中动态路由不存在时如何重定向至其他页面

首先修正代码中的参数名错误（generateStaticParams返回的是slug字段，但原代码中使用了params.field），然后在页面组件中直接处理不存在的路由场景，具体实现如下：

完整代码示例 #

import { fields } from "@/data/fields";
import { notFound, redirect } from 'next/navigation';

export function generateStaticParams() {
  return fields.map((field) => ({ slug: field.slug }));
}

// 静态数据无需异步操作，改为同步函数
const getField = (slug) => {
  return fields.find((field) => field.slug === slug);
};

const FieldPage = ({ params }) => {
  const field = getField(params.slug);

  // 处理不存在的路由
  if (!field) {
    // 方案1：抛出404错误，Next.js会返回404状态码并显示默认/自定义404页面
    notFound();
    // 方案2：重定向到首页或指定页面（替换为你的目标路径）
    // redirect('/');
  }

  return <>{field.name}</>;
};

export default FieldPage;

关键说明 #

1. 参数名修正：generateStaticParams返回的路由参数是slug，因此页面组件中必须使用params.slug来获取路由值，原代码中的params.field会导致field始终为undefined，这是构建时抛出500错误的核心原因之一。
2. 路由不存在的处理：
   • 使用notFound()：这是Next.js处理无效路由的标准方式，会返回404状态码，同时可以通过自定义app/not-found.js页面来展示自定义404内容。
   • 使用redirect()：如果需要引导用户到有效页面（比如首页），可以调用该方法实现重定向，注意会返回3xx状态码。
3. 同步函数优化：由于fields是本地静态导入的数据，无需使用异步函数，改为同步函数可以减少不必要的性能开销。

如果后续需要将getField改为从API获取数据，只需保留async/await逻辑即可，判断不存在路由的代码无需修改：

const getField = async (slug) => {
  // 示例：从API获取数据
  // const res = await fetch(`/api/fields/${slug}`);
  // return res.json();
  return fields.find((field) => field.slug === slug);
};

const FieldPage = async ({ params }) => {
  const field = await getField(params.slug);

  if (!field) {
    notFound();
  }

  return <>{field.name}</>;
};

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