在 Next.js App Router 中，useRouter().query 已被弃用，直接解构 router.query.id 会报错；应改用 useParams() 获取动态路由参数，而非 usePathname 或旧版 next/router。

在 next.js app router 中，`userouter().query` 已被弃用，直接解构 `router.query.id` 会报错；应改用 `useparams()` 获取动态路由参数，而非 `usepathname` 或旧版 `next/router`。

Next.js 自 13.4 起全面推荐使用 App Router（基于 app/ 目录），其路由参数处理机制与旧版 Page Router 截然不同。你当前的路径 app/shop/[id]/page.tsx 明确属于 App Router 体系，因此绝不能使用 next/router（Page Router 专属），也不应依赖 router.query——它在 App Router 中始终为 undefined，导致 TypeError: Cannot destructure property 'id' of 'router.query' as it is undefined。

✅ 正确做法：使用 useParams() 钩子
useParams() 是 App Router 官方提供的、专用于读取动态段（如 [id]）值的 React Hook，返回一个包含所有命名动态参数的对象：

"use client";

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation'; // ✅ 正确导入

export default function ShopPage() {
  const [shopData, setShopData] = useState<any>(null);
  const { id } = useParams(); // ✅ 直接解构 id，类型安全（id 为 string | string[]）

  useEffect(() => {
    const fetchData = async () => {
      if (!id) return; // 安全防护：id 可能为数组（如 /[id]/[slug]），但单层动态路由下通常为 string

      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>;
  if (!shopData) return <div>Fetching shop details...</div>;

  return (
    <div>
      <h1>Shop ID: {id}</h1>
      <pre class="brush:php;toolbar:false;">{JSON.stringify(shopData, null, 2)}