如何在 Next.js 中通过路由传递并获取动态参数（如 userId）

本文详解如何在 Next.js 应用中，利用 router.push 传递动态路由参数（如 /user/123 中的 123），并在目标页面（如 pages/user/[id].js）中安全、可靠地获取并使用该参数发起数据请求。

本文详解如何在 next.js 应用中，利用 `router.push` 传递动态路由参数（如 `/user/123` 中的 `123`），并在目标页面（如 `pages/user/[id].js`）中安全、可靠地获取并使用该参数发起数据请求。

在 Next.js 中，实现页面间参数传递与消费的核心机制是动态路由（Dynamic Routes） + useRouter Hook。你无需依赖 localStorage 或全局状态来中转 userId——Next.js 原生支持从 URL 路径中结构化提取参数，既简洁又符合服务端渲染（SSR）和静态生成（SSG）的最佳实践。

✅ 正确的路由配置与跳转方式

首先，确保你的目标页面路径遵循 Next.js 动态路由命名规范：

• 在 pages/user/[id].js（或 .tsx）下创建页面文件；
• 文件名中的 [id] 表示该段路径为动态参数，将自动映射为 router.query.id。

在源组件（如 PostCard）中，使用 router.push 进行带参跳转：

import { useRouter } from 'next/router'; import styles from './postcard.module.css';  const PostCard = ({ user }) => {   const router = useRouter();    return (     <div className={styles.post}>       <div         className={styles.userDetails}         onClick={() => {           // ✅ 正确：直接跳转至动态路由，URL 变为 /user/abc123           router.push(`/user/${user._id}`);         }}       >         View Profile       </div>     </div>   ); };  export default PostCard;

⚠️ 注意：不要拼接查询参数（如 /user?id=…），也不应依赖 localStorage 存储临时 ID —— 这会破坏可分享链接、SSR 兼容性，并带来状态不一致风险。

✅ 在目标页面中安全获取并使用 id

在 pages/user/[id].js 中，使用 useRouter 获取路由参数，并注意处理 SSR/SSG 下的初始空值问题：

import { useRouter } from 'next/router'; import { useState, useEffect } from 'react';  export default function UserDetail() {   const router = useRouter();   const { id } = router.query; // ✅ 动态参数在此处解构   const [user, setUser] = useState(null);   const [loading, setLoading] = useState(true);    useEffect(() => {     // ✅ router.query.id 在客户端首次渲染时可能为 undefined（SSR 期间为空字符串或未定义）     if (!id) return;      const getUserData = async () => {       try {         setLoading(true);         // ✅ 使用从 URL 提取的 id，而非 localStorage 或硬编码         const res = await instance.get(`/user/${id}`);         setUser(res.data);       } catch (err) {         console.error('Failed to fetch user:', err);       } finally {         setLoading(false);       }     };      getUserData();   }, [id]); // ✅ 将 id 加入依赖数组，确保参数变更时重新请求    if (loading) return <div>Loading...</div>;   if (!user) return <div>User not found</div>;    return (     <div>       <h1>{user.name}</h1>       <p>ID: {user._id}</p>     </div>   ); }

? 关键要点总结

• 路径即参数：/user/[id].js → 访问 /user/65a1b2c3 时，router.query.id === ’65a1b2c3’；
• 服务端友好：router.query 在 getServerSideProps 或 getStaticProps 中也可通过 context.params.id 获取，支持预渲染；
• 类型安全建议（typescript）：可为 router.query 添加类型断言或使用 zod 校验，避免运行时错误；
• seo 与可分享性：每个用户拥有独立、语义化 URL（如 /user/jane-doe），利于搜索引擎收录和用户直接分享；
• 避免反模式：不推荐用 localStorage、useState 跨页面传参，或通过 router.push(url, as) 隐藏真实路径——这会削弱 Next.js 的路由能力与调试体验。

掌握这一模式后，你可轻松扩展为多级动态路由（如 /user/[id]/posts/[postId]），构建高度可维护的 Next.js 应用架构。