Failed to compile.
src/app/blogs/[id]/page.tsx
Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1

import { blogs } from "@/constants";
import { notFound } from "next/navigation";
import Image from "next/image";

interface Props {
  params: {
    id: string;
  };
}

//ssg
export async function generateStaticParams() {
  return blogs.map((blog) => ({
    id: blog.id,
  }));
}

//seo metadata
export async function generateMetadata({ params }: Props) {
  const blog = blogs.find((b) => b.id === params.id);

  if (!blog) return { title: "Blog Not Found" };

  return {
    title: blog.title,
    description: blog.excerpt,
    openGraph: {
      ....
      ],
    },
  };
}

export default function BlogDetailPage({ params }: Props) {
  const blog = blogs.find((b) => b.id === params.id);

  if (!blog) return notFound();

  return (
    <article className="px-6 md:px-20 py-20 pt-40 max-w-4xl mx-auto">
      <Image
        src={blog.thumbnail}
        alt={blog.title}
        width={800}
        height={500}
        className="rounded-lg w-full h-120 object-top object-cover mb-8"
      />
      <p className="text-gray-500 text-sm mb-2">
        {blog.date} · {blog.author}
      </p>
      <h1 className="text-4xl font-bold mb-4">{blog.title}</h1>
      <p className="text-lg text-gray-700 leading-relaxed">
        The full blog content will come here. <br />
      </p>
    </article>
  );
}