NextJS 13 App Router+TS：页面URL传参后无法获取参数求助

问题根源梳理 #

你的代码存在几个核心问题：

1. 路由结构错误：未按App Router要求创建动态路由文件，无法捕获URL参数
2. Link跳转方式错误：App Router下不能直接把整个对象传给query，需用动态路由路径传递参数
3. 字段不匹配：数据里没有account字段，代码却使用member.account
4. 废弃API残留：保留了已废弃的next/router导入，未完全切换到next/navigation的API

步骤1：创建正确的动态路由结构 #

在app目录下新建detail/[id]文件夹，内部创建page.tsx，路径为：app/detail/[id]/page.tsx。这是App Router捕获URL参数的标准方式，[id]会匹配URL中detail/后面的任意值。

步骤2：修正Home页面（app/page.tsx） #

'use client'

import Link from "next/link";
import Heading from "../Components/Heading";
import { listMember } from "./member"; // 假设成员列表放在app/member.ts文件中

export default function HomePage() {
  return (
    <>
      <Heading>iOS Team</Heading>
      <ul className="px-5">
        {listMember.map(member => (
          <li key={member.id}>
            <Link href={`/detail/${member.id}`}>
              {member.name}
            </Link>
          </li>
        ))}
      </ul>
    </>
  )
}

修正点：

• 移除废弃的next/router相关导入
• 替换未定义的iOS变量为listMember
• Link改用动态路径/detail/${member.id}传递id参数
• 增加key属性（React列表渲染要求）
• 显示字段改为member.name（匹配数据结构）

步骤3：修正Detail页面（app/detail/[id]/page.tsx） #

'use client'

import { useParams } from "next/navigation";
import { listMember } from "../../member";

export default function DetailMember() {
  const params = useParams<{ id: string }>();
  // 处理参数可能为undefined的情况，同时转成数字
  const memberId = params.id ? parseInt(params.id) : null;
  const member = listMember.find(item => item.id === memberId);

  if (!member) {
    return <h1>成员不存在</h1>;
  }

  return (
    <>
      <h1>这是 {member.name} 的详情页</h1>
      <p>年龄：{member.age}</p>
    </>
  )
}

修正点：

• 移除废弃的next/router导入
• 正确导入listMember
• 给useParams添加类型声明，明确id为字符串类型
• 处理params.id可能为undefined的边界情况
• 增加成员不存在的兜底显示
• 显示字段匹配数据结构（member.name、member.age）

关键注意事项 #

• 路由大小写：Next.js路由区分大小写，建议统一用小写（比如detail而非Detail）
• 参数类型：useParams返回的所有参数都是字符串类型，需手动转成数字或其他类型
• 动态路由命名：[id]中的名称要和useParams获取的参数名一致（比如[uid]对应params.uid）
• 边界处理：必须考虑参数不存在或成员找不到的情况，避免页面报错

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