如何修复Next.js 13中AppRouterInstance不存在query属性的问题？

问题根源 #

Next.js 13+的App Router（next/navigation）和旧版Pages Router（next/router）是两套独立的路由系统：

• next/navigation的useRouter没有query属性，这是API设计差异；
• 在App Router环境下使用next/router会触发「未挂载」错误，因为它只适配Pages Router。

具体解决方法 #

根据你的组件类型（服务器/客户端）选择对应方案：

1. 服务器组件（App Router默认）

如果你的组件是服务器组件（没有'use client'指令），动态路由参数会直接通过组件props传入：

// 示例路由：app/[id]/page.js
export default function Page({ params }) {
  const { id } = params;
  // 这里直接使用id即可
  return <div>当前ID：{id}</div>;
}

注：params的键名和你动态路由文件名一致，比如[postId]对应params.postId

2. 客户端组件

如果是客户端组件（需要交互的场景），用useParams或useSearchParams代替：

（1）获取动态路由参数

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

export default function ClientComp() {
  const params = useParams();
  const id = params.id; // 对应路由[ id ]
  return <div>当前ID：{id}</div>;
}

（2）获取URL搜索参数（如?id=123）

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

export default function ClientComp() {
  const searchParams = useSearchParams();
  const id = searchParams.get('id');
  return <div>搜索参数ID：{id}</div>;
}

关键注意事项 #

• 不要在App Router里混用next/router，必须使用next/navigation提供的API；
• useParams、useSearchParams只能在客户端组件（声明'use client'）中使用；
• 服务器组件无需额外导入，直接通过props接收params。

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