Type error: Type '{ params: { slug: string; }; }' does not satisfy the constraint 'PageProps'.

[rafeym]

Summary

I have been trying to deploy my code for almost an hour and I keep getting this same error over and over again.

I have included my code down below.

Some help on this would be greatly appreciated!

FULL ERROR MESSAGE:
app/inventory/[slug]/page.tsx
Type error: Type '{ params: { slug: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ slug: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

Additional information

/app/inventory/[slug]/page.tsx

import { fetchSanityQuery } from "@/lib/fetchSanity";
import { getCarBySlugQuery } from "@/lib/queries";
import { notFound } from "next/navigation";
import { formatCurrency } from "@/lib/utils";

import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { CarImageSection } from "@/components/CarImageGallery";
import BookAppointmentModal from "@/components/BookingAppointmentModal";
import { Separator } from "@/components/ui/separator";
import CarfaxButton from "@/components/CarfaxButton";

export default async function CarDetailsPage({
  params,
}: {
  params: { slug: string };
}) {
  const car = await fetchSanityQuery(getCarBySlugQuery, { slug: params.slug });

  if (!car) {
    return notFound();
  }

  return (
    <div className="p-6 max-w-7xl mx-auto flex flex-col lg:flex-row gap-8">
      {/* Left: Main image and carousel */}
      <div className="w-full lg:w-2/3 flex flex-col">
        <div className="flex-none">
          <CarImageSection images={car.images} />
        </div>
        {car.description && (
          <div className="mt-8">
            <div className="flex items-center justify-between">
              <h3 className="text-xl font-semibold mb-0">Description</h3>
              <div className="flex gap-2">
                <BookAppointmentModal
                  car={{
                    vin: car.vin,
                    make: car.make,
                    model: car.model,
                    year: car.year,
                    mileage: car.mileage,
                    price: car.price,
                  }}
                  disabled={!car.isAvailable} // Disable booking if sold
                />
                <CarfaxButton carfaxUrl={car.carfaxUrl} />
              </div>
            </div>
            <p className="text-muted-foreground whitespace-pre-line mt-2">
              {car.description}
            </p>
          </div>
        )}
        <div className="mt-8">
          <h3 className="text-xl font-semibold mb-4">Dealership Information</h3>
          <div className="text-muted-foreground">
            <p className="font-medium">{car.dealership}</p>
            <p>{car.address}</p>
          </div>
        </div>
      </div>

      {/* Right: Car Details */}
      <div className="w-full lg:w-1/3 flex-none">
        <Card className="border-none shadow-lg">
          <CardContent className="p-6 space-y-6">
            <div className="space-y-2">
              <h2 className="text-2xl font-bold tracking-tight">
                {car.year} {car.make} {car.model} {car.trim}
              </h2>
              <p className="text-xl font-semibold text-blue-600">
                {formatCurrency(car.price)}
              </p>
              <Badge
                variant={car.isAvailable ? "default" : "destructive"}
                className="text-sm px-3 py-1"
              >
                {car.isAvailable ? "Available" : "Sold"}
              </Badge>
            </div>

            <Separator />

            <div className="space-y-4">
              <h3 className="text-base font-semibold">Key Specifications</h3>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Trim</p>
                  <p className="text-sm font-medium">{car.trim}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">VIN</p>
                  <p className="text-sm font-medium">{car.vin}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Mileage</p>
                  <p className="text-sm font-medium">
                    {car.mileage?.toLocaleString()} km
                  </p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Transmission</p>
                  <p className="text-sm font-medium">{car.transmission}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Drivetrain</p>
                  <p className="text-sm font-medium">{car.drivetrain}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Engine</p>
                  <p className="text-sm font-medium">{car.engine}</p>
                </div>
              </div>
            </div>

            <Separator />

            <div className="space-y-4">
              <h3 className="text-base font-semibold">Additional Details</h3>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Fuel Type</p>
                  <p className="text-sm font-medium">{car.fuelType}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Body Type</p>
                  <p className="text-sm font-medium">{car.bodyType}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Condition</p>
                  <p className="text-sm font-medium">{car.condition}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">
                    Exterior Color
                  </p>
                  <p className="text-sm font-medium">{car.exteriorColor}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">
                    Interior Color
                  </p>
                  <p className="text-sm font-medium">{car.interiorColor}</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">City MPG</p>
                  <p className="text-sm font-medium">{car.cityMpg}L</p>
                </div>
                <div className="space-y-1">
                  <p className="text-xs text-muted-foreground">Highway MPG</p>
                  <p className="text-sm font-medium">{car.highwayMpg}L</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

Example

No response

[icyJoseph]

Hi,

Since Next 15 the params are a Promise:

export default async function CarDetailsPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const car = await fetchSanityQuery(getCarBySlugQuery, { slug });

This change set should do the trick.