Next.js 13使用useRouter获取查询参数报错：router.query未定义

开发者阿泽

2026-7-18

解决Next.js 13中useRouter无法访问query参数的问题

问题根源

你导入的是App Router（Next.js 13+ app目录）的useRouter（来自next/navigation），但参考的是Pages Router（pages目录）的文档。两者API完全不同：App Router的useRouter没有query属性，这就是报错的直接原因。

解决方案

根据你使用的路由系统选择对应方案：

方案1：使用App Router（app目录）

方式A：用`useSearchParams`获取查询参数

如果要获取URL中的查询参数（比如?id=123），使用useSearchParams钩子：

'use client'
import { useSearchParams } from 'next/navigation';

const Post = () => {
  const searchParams = useSearchParams();
  const postId = searchParams.get('id');

  return (
    <div>
      post number : {postId}
    </div>
  )
}

export default Post

方式B：动态路由直接用`params`（服务器组件）

如果是动态路由（比如app/post/[id]/page.js），在服务器组件中可以直接接收params参数：

// app/post/[id]/page.js（无需'use client'）
export default function Post({ params }) {
  return (
    <div>
      post number : {params.id}
    </div>
  )
}

方案2：使用Pages Router（pages目录）

如果你是在pages目录下开发，需要从next/router导入useRouter，而不是next/navigation：

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

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

  return (
    <div>
      post number : {id}
    </div>
  )
}

export default Post