在 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...

}