`useRouter` 引入后为何无法获取路由参数？

Question

在使用 `useRouter` 时，为何引入后无法正确获取路由参数？常见原因包括：**未在页面组件中正确使用、未等待路由完成加载、或参数名拼写错误**。例如，在 `next/router` 中，`router.query` 参数在初次渲染时可能尚未就绪，导致获取为空。此外，若使用 `next/dist/client/router` 路径引入内部模块，而非官方推荐的 `next/router`，也可能引发不可预期的行为。确保组件处于 `` 的正确渲染链中，并通过 `useEffect` 监听 `router.query` 变化，可有效解决此问题。

Answer 1

一、useRouter 引入后无法正确获取路由参数的常见原因与解决方案

在使用 Next.js 的 useRouter 钩子时，开发者常常遇到无法正确获取路由参数的问题。本文将从浅入深、从常见问题到深层机制，系统性地分析此类问题的成因，并提供解决方案。

1. 基础层面：是否在页面组件中正确使用 useRouter？

useRouter 只能在 React 函数组件或自定义钩子中使用。如果在类组件中调用，会抛出错误；如果在非组件文件（如服务层）中使用，也会导致无效的 router 实例。

• 正确使用方式示例：

    
import { useRouter } from 'next/router';

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

  return 
当前ID: {id}
;
};
    
  

2. 参数加载时机：未等待路由完成加载

在页面首次加载时，router.query 可能尚未填充完整参数。这是因为 Next.js 的路由是异步加载的，参数可能在组件首次渲染时尚未就绪。

• 解决方案：使用 useEffect 监听 query 变化

    
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyPage = () => {
  const router = useRouter();

  useEffect(() => {
    if (router.query.id) {
      console.log('参数已就绪:', router.query.id);
    }
  }, [router.query.id]);

  return 
请查看控制台输出
;
};
    
  

3. 参数名拼写错误或命名不一致

Next.js 的动态路由参数通过 pages/ 下的文件名定义。例如，pages/posts/[id].js 会生成 router.query.id。若在代码中使用了错误的名称（如 router.query.postId），则无法获取到正确值。

文件路径	query 中的参数名
pages/users/[userId].js	router.query.userId
pages/products/[slug].js	router.query.slug

4. 引入路径错误：使用了非官方推荐的模块路径

有些开发者为了“优化”或调试，直接从 next/dist/client/router 引入模块，这属于内部实现，官方不推荐。使用该路径可能导致兼容性问题、升级失败，甚至 useRouter 返回 undefined。

• 错误引入方式：

    
// 错误
import { useRouter } from 'next/dist/client/router';
    
  

• 正确引入方式：

    
// 正确
import { useRouter } from 'next/router';
    
  

5. 组件未处于正确的渲染链中

Next.js 的页面组件必须通过 <Component {...pageProps} /> 渲染链传递，才能正确获取路由上下文。若组件是通过非页面组件（如布局组件、高阶组件等）引入，且未正确传递 pageProps，可能导致 useRouter 无法获取路由参数。

6. 深度解析：路由参数的生命周期行为

Next.js 的路由参数在组件首次渲染时可能为空对象 {}，这是因为参数是异步加载的。可以通过以下方式判断参数是否加载完成：

    
useEffect(() => {
  if (router.isReady) {
    console.log('路由参数已加载完成');
  }
}, [router.isReady]);
    
  

7. 流程图：useRouter 参数获取流程分析

graph TD
    A[组件挂载] --> B{router.query 是否存在参数?}
    B -->|是| C[使用参数]
    B -->|否| D[等待 isReady 变为 true]
    D --> E[触发 useEffect 回调]
    E --> F[再次读取 router.query]

8. 总结性关键词

useRouter、router.query、动态路由、参数未就绪、isReady、useEffect、拼写错误、组件生命周期、引入路径错误、渲染链、异步加载、Next.js 路由机制