Next.js中如何从router.push跳转后的页面获取URL中的ID？

错误原因 #

你当前使用的是Next.js 13+ App Router的useRouter（从next/navigation导入），这个路由实例没有query属性——query是旧版Pages Router（next/router）里的API，所以会出现Property 'query' does not exist on type 'AppRouterInstance'的报错。

解决方案 #

根据你的目标页面（/user/projects/[id]）是服务器组件还是客户端组件，选择对应方法：

1. 服务器组件场景（推荐，无需客户端标记） #

如果你的编辑页面是服务器组件（没有"use client"指令），可以直接通过组件props接收动态路由参数：

// app/user/projects/[id]/page.tsx
interface EditProjectPageProps {
  params: { id: string };
}

export default async function EditProjectPage({ params }: EditProjectPageProps) {
  // 获取动态路由ID
  const projectId = params.id;
  
  // 调用API获取项目数据（服务器组件可直接用await）
  const res = await fetch(`/api/projects/${projectId}`);
  const project = await res.json();

  return (
    <div>
      <h1>编辑项目：{project.name}</h1>
      {/* 渲染编辑表单 */}
    </div>
  );
}

2. 客户端组件场景 #

如果你的编辑页面必须是客户端组件（比如需要交互状态），使用useParams钩子（从next/navigation导入）来获取动态路由参数：

"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";

export default function EditProjectPage() {
  const params = useParams();
  // 类型断言确保是字符串（因为useParams返回的是unknown类型）
  const projectId = params.id as string;
  const [project, setProject] = useState(null);

  useEffect(() => {
    // 调用API获取项目数据
    const fetchProject = async () => {
      const res = await fetch(`/api/projects/${projectId}`);
      const data = await res.json();
      setProject(data);
    };

    if (projectId) fetchProject();
  }, [projectId]);

  if (!project) return <div>加载中...</div>;

  return (
    <div>
      <h1>编辑项目：{project.name}</h1>
      {/* 渲染编辑表单 */}
    </div>
  );
}

关键注意事项 #

• 确保动态路由的文件结构正确：必须是app/user/projects/[id]/page.tsx，方括号[id]是动态参数的命名，和你获取时的params.id对应。
• 客户端组件必须添加"use client"指令，否则无法使用useParams等客户端钩子。

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