Nextjs中的类型“AppRouterInstance”上不存在属性“query”
我试图从我的json文件中获取与Next 13的应用程序目录中的页面ID匹配的项目，并且正在获取Property 'query' does not exist on type 'AppRouterInstance'。
这是返回错误“const { query } = router;“
我的文件夹是app/projects/[id]/page.tsx

'use client';

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import data from '../../../data.json'; // Import the data.json file directly
import React from 'react'; // Add this line to import the React object



export default function Work() {
    const router = useRouter();
    const { query } = router;
    const id = query?.id;
  
    useEffect(() => {
      console.log(data.portfolioData);
    }, []);
  
    const item = data.portfolioData.find((item) => item.id.toString() === id);
  
    if (!item) {
      return <div>Loading...</div>;
    }
  
  return (
    <main className="min-h-screen bg-secondary">
      <section>
        <div
          style={{
            backgroundImage: `url("/images/text-bg.png")`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }}
        ></div>
      </section>
      <div className="xl:container mx-auto px-4 sm:px-6 xl:px-0">
        <h1 className="mt-12 text-3xl font-bold font-termina text-primary mb-6 text-center sm:text-left">
          <span className="font-light">MY</span> <br></br>DESIGNS
        </h1>

        <div className="bg-accent p-4 card">
          {/* Loop through data.portfolioData */}
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
            {data.portfolioData.map((item) => (
              <div key={item.id} className="rounded-lg w-auto bg-accent relative transform hover:scale-105 hover:rotate-1 transition-all duration-500 shadow-2xl">
                <img className="rounded-lg" src={item.thumbnail} alt={item.title} />
                <div className="rounded-lg absolute inset-0 flex flex-col items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-500 bg-black bg-opacity-70">
                  <h3 className="text-md font-termina font-semibold text-white">{item.title}</h3>
               
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}