Next.js 13动态路由传参报错：params is not defined 求助

针对你遇到的动态路由参数未定义问题，分两种常见的Next.js路由模式给出具体修复代码和原因说明：

情况1：使用Pages Router（Next.js 12及以下） #

错误通常是因为你直接在组件中引用params，但未从页面数据获取函数的上下文解构参数，或者未通过路由钩子正确读取参数。

修复代码（静态生成场景） #

// /pages/service-clients/magazine/[magazineId].tsx
import { GetStaticProps, GetStaticPaths } from 'next';

// 假设你的文章数据类型和数组
type Magazine = {
  id: number;
  title: string;
  content: string;
};
const magazines: Magazine[] = [
  { id: 1, title: "客户服务杂志第1期", content: "这是第一期杂志的内容..." },
  { id: 2, title: "客户服务杂志第2期", content: "这是第二期杂志的内容..." },
];

export default function MagazinePage({ magazine }: { magazine: Magazine }) {
  if (!magazine) return <div>该文章不存在</div>;
  return (
    <div className="magazine-page">
      <h1>{magazine.title}</h1>
      <div className="content">{magazine.content}</div>
    </div>
  );
}

// 预生成所有动态路由路径
export const getStaticPaths: GetStaticPaths = async () => {
  const paths = magazines.map(item => ({
    params: { magazineId: item.id.toString() },
  }));
  return { paths, fallback: false };
};

// 获取对应路由的文章数据（必须从上下文解构params）
export const getStaticProps: GetStaticProps = async ({ params }) => {
  // 校验参数存在性
  if (!params?.magazineId) return { notFound: true };
  const targetMagazine = magazines.find(
    item => item.id === parseInt(params.magazineId)
  );
  if (!targetMagazine) return { notFound: true };
  return { props: { magazine: targetMagazine } };
};

修复代码（客户端路由场景） #

如果不需要预渲染，可通过useRouter钩子读取动态参数：

// /pages/service-clients/magazine/[magazineId].tsx
import { useRouter } from 'next/router';

const magazines: Magazine[] = [/* 你的文章数据 */];

export default function MagazinePage() {
  const router = useRouter();
  // 注意：router.query在页面初始加载时可能为undefined，需做判断
  const { magazineId } = router.query;
  
  if (!magazineId) return <div>加载中...</div>;
  
  const targetMagazine = magazines.find(
    item => item.id === parseInt(magazineId as string)
  );
  
  if (!targetMagazine) return <div>该文章不存在</div>;
  
  return (
    <div className="magazine-page">
      <h1>{targetMagazine.title}</h1>
      <div className="content">{targetMagazine.content}</div>
    </div>
  );
}

情况2：使用App Router（Next.js 13+） #

错误原因通常是页面组件未接收params作为入参，或者类型定义缺失。

修复代码 #

// /app/service-clients/magazine/[magazineId]/page.tsx

// 你的文章数据类型和数组
type Magazine = {
  id: number;
  title: string;
  content: string;
};
const magazines: Magazine[] = [
  { id: 1, title: "客户服务杂志第1期", content: "这是第一期杂志的内容..." },
  { id: 2, title: "客户服务杂志第2期", content: "这是第二期杂志的内容..." },
];

// App Router要求页面组件必须接收params参数
export default function MagazinePage({ params }: { params: { magazineId: string } }) {
  const targetMagazine = magazines.find(
    item => item.id === parseInt(params.magazineId)
  );
  
  if (!targetMagazine) return <div>该文章不存在</div>;
  
  return (
    <div className="magazine-page">
      <h1>{targetMagazine.title}</h1>
      <div className="content">{targetMagazine.content}</div>
    </div>
  );
}

常见错误根源 #

1. Pages Router场景：未在getStaticProps/getServerSideProps中从上下文解构params，直接在组件中引用params变量。
2. App Router场景：页面组件未声明接收params入参，或未正确定义params的TypeScript类型。
3. 类型转换遗漏：动态路由参数默认是字符串类型，未转换为数字类型去匹配文章数组中的数字ID。

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