在 Next.js App Router 中，useRouter().query 不可用，应改用 useParams() 获取动态路由参数，否则会因 router.query 为 undefined 导致解构错误。

在 next.js app router 中，动态路由参数获取方式已发生根本性变化：`userouter().query` 不再适用，直接解构 `router.query.id` 会导致 `typeerror: cannot destructure property 'id' of 'router.query' as it is undefined`。必须使用 `useparams()` hook 从 url 路径中安全提取参数。

Next.js 13+ 的 App Router（即 app/ 目录结构）已弃用传统的 router.query 模式。你当前的文件路径 app/shop/[id]/page.tsx 明确属于 App Router，因此：

✅ 正确做法：使用 useParams() 获取动态段参数
❌ 错误做法：调用 useRouter().query（该对象在 App Router 中始终为 undefined）或尝试 import { useRouter } from 'next/route'（该路径不存在，属拼写错误）

以下是修复后的完整示例代码：

"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] 动态参数 —— 返回 string | string[]

  useEffect(() => {
    const fetchData = async () => {
      // 注意：useParams() 返回的 id 可能是字符串数组（如嵌套路由），此处单级动态路由下为 string
      if (typeof id === '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>Loading shop data...</div>;

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