在 Next.js App Router 中，useRouter().query 已被移除，直接解构 router.query.id 会报错；应改用 useParams() 获取动态路由参数，这是官方推荐且稳定可靠的方式。
在 next.js app router 中，`userouter().query` 已被移除，直接解构 `router.query.id` 会报错；应改用 `useparams()` 获取动态路由参数，这是官方推荐且稳定可靠的方式。
Next.js 自 13.4 版本起全面转向 App Router（基于 React Server Components 架构），其路由参数获取机制与旧版 Page Router 截然不同。你当前的代码结构 app/shop/[id]/page.tsx 明确属于 App Router，而错误根源在于：next/navigation 中的 useRouter 不再提供 query 对象（该 API 仅存在于 Page Router 的 next/router 中），因此 router.query 恒为 undefined，解构即抛出 TypeError。
✅ 正确做法：使用 useParams() 获取动态段参数
在 App Router 中，每个动态路由段（如 [id]）会自动注入到 params 对象中，需通过 useParams() Hook 在客户端组件中安全读取：
"use client";
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation'; // ✅ 正确导入
export default function ShopPage() {
const [shopData, setShopData] = useState<any>(null);
const { id } = useParams(); // ✅ 直接解构 params，id 类型为 string | string[]
useEffect(() => {
const fetchData = async () => {
if (!id) return; // 安全防护：id 可能为 undefined（服务端渲染时）或数组（嵌套路由）
try {
const response = await fetch(`/api/shop/${id}`);
if (response.ok) {
const result = await response.json();
setShopData(result.shop);
} else {
console.error('Failed to fetch shop:', response.statusText);
}
} catch (error) {
console.error('Error fetching shop:', error);
}
};
fetchData();
}, [id]); // ✅ 依赖 id，确保参数变化时重新请求
if (!id) {
return <div>Loading...</div>;
}
return (
<div>
<h1>Shop ID: {id}</h1>
{shopData ? <pre class="brush:php;toolbar:false;">{JSON.stringify(shopData, null, 2)} : Loading shop data...
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
⚠️ 注意事项：
-
useParams()返回的id类型为string | string[]—— 单层动态路由（如/shop/[id]）通常为string，但为健壮性建议做类型守卫或显式转换：const shopId = Array.isArray(id) ? id[0] : id; -
useParams()是客户端 Hook，必须在"use client"组件中使用，不可用于纯服务端组件（.server.tsx或无"use client"标记的组件） - 不要尝试混用
next/router（Page Router）和next/navigation（App Router），二者不兼容；若项目仍使用 Pages Router（pages/shop/[id].tsx），才应导入next/router - 若需访问完整路径（如
/shop/123?tab=products中的查询参数），应配合useSearchParams()使用，而非依赖已废弃的router.query
? 总结：App Router 的核心原则是“参数即 props”，动态段直接映射为 params，无需解析 URL。摒弃 router.query 思维，拥抱 useParams() + useSearchParams() 组合，即可写出清晰、可维护、符合 Next.js 最佳实践的动态页面。
