Next.js技术问题：无法从Link跳转页面获取id参数

根据你的代码和场景，问题出在动态路由参数的获取方式上，以下分两种Next.js路由系统给出解决方案：

一、Pages Router（Next.js 12及更早版本） #

1. 确保路由文件命名正确 #

你的页面文件必须放在pages/product目录下，且命名为[id].js（或.tsx等），方括号里的id要和你要获取的参数名一致。

2. 服务端/静态渲染页面获取参数 #

如果页面使用getServerSideProps或getStaticProps，需要从上下文的params中提取ID，再传递给页面组件：

// pages/product/[id].js
export async function getServerSideProps(context) {
  // 从context.params中获取动态路由参数
  const { id } = context.params;
  
  return {
    props: { id } // 将ID传递给页面组件
  };
}

const ProductPage = ({ id }) => {
  console.log(id); // 现在能正常输出ID
  return <div>当前产品ID：{id}</div>;
};

export default ProductPage;

3. 客户端渲染页面获取参数 #

如果是纯客户端组件，使用useRouter钩子从router.query中获取：

// pages/product/[id].js
import { useRouter } from 'next/router';

const ProductPage = () => {
  const router = useRouter();
  const { id } = router.query;

  // 注意：首次加载时router.query可能为空，可加判断避免报错
  if (!id) return <div>加载中...</div>;
  
  console.log(id);
  return <div>当前产品ID：{id}</div>;
};

export default ProductPage;

二、App Router（Next.js 13+） #

1. 确保路由结构正确 #

页面文件需放在app/product/[id]目录下，命名为page.js（或.tsx），[id]目录对应动态参数名。

2. 直接从params解构获取 #

App Router的页面组件可以直接接收params参数：

// app/product/[id]/page.js
export default function ProductPage({ params }) {
  const { id } = params;
  
  console.log(id); // 正常输出ID
  return <div>当前产品ID：{id}</div>;
}

3. 客户端组件使用useParams钩子 #

如果是客户端组件（需加'use client'指令），使用useParams钩子：

// app/product/[id]/page.js
'use client';
import { useParams } from 'next/navigation';

export default function ProductPage() {
  const params = useParams();
  const id = params.id;
  
  console.log(id);
  return <div>当前产品ID：{id}</div>;
}

关键注意点 #

• 动态路由的参数名必须和文件/目录的方括号内名称一致（比如你用[id]，就只能获取id参数）
• 如果是App Router，确保你的Next.js版本在13及以上，且开启了App Router模式

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