Vercel build fails with TypeScript error 'params' is a Promise on Next.js 15 Server Component

Question

I am building a website using Next.js 15.3.3, React 19, and Sanity.io for content. Everything works perfectly in my local development environment (next dev). However, when I deploy to Vercel, the build fails during the "Checking validity of types" step with a TypeScript error on my dynamic pages (like app/category/[slug]/page.tsx).

Error:

Failed to compile.
app/category/[slug]/page.tsx
Type error: Type 'CategoryPageProps' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
  Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

Here is the code for the failing page, app/category/[slug]/page.tsx:

// app/category/[slug]/page.tsx
import { client as sanityClient } from "@/lib/sanity";
import { createClient as createServerSupabaseClient } from "@/lib/supabase/server";
import { notFound } from "next/navigation";
import ProductCard from "@/components/ProductCard";
import ProductFilters from "@/components/ProductFilters";

interface CategoryPageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

async function getData(slug: string, searchParams: CategoryPageProps['searchParams']) {
  const sort = typeof searchParams.sort === 'string' ? searchParams.sort : 'latest';
  const minPrice = typeof searchParams.minPrice === 'string' ? parseFloat(searchParams.minPrice) : undefined;
  const maxPrice = typeof searchParams.maxPrice === 'string' ? parseFloat(searchParams.maxPrice) : undefined;
  const inStock = searchParams.inStock === 'true';

  // 1. Build filter and order clauses for GROQ
  let orderClause = '';
  if (sort === 'price-asc') orderClause = '| order(price asc)';
  if (sort === 'price-desc') orderClause = '| order(price desc)';
  if (sort === 'latest') orderClause = '| order(_createdAt desc)';

  const filterClauses: string[] = [];
  if (minPrice) filterClauses.push(`price >= ${minPrice}`);
  if (maxPrice) filterClauses.push(`price <= ${maxPrice}`);
  if (inStock) filterClauses.push(`stock > 0`);

  const categoryQuery = `*[_type == "category" && slug.current == $slug][0]{ title, description }`;

  const productsQuery = `*[_type == "product" && references(*[_type=="category" && slug.current == $slug]._id) ${filterClauses.length > 0 ? `&& ${filterClauses.join(' && ')}` : ''}] ${orderClause} {
    _id, name, slug, price, compareAtPrice, images
  }`;

  const category = await sanityClient.fetch(categoryQuery, { slug });
  const products = await sanityClient.fetch(productsQuery, { slug });

  return { category, products };
}

export default async function CategoryPage({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const { category, products } = await getData(params.slug, searchParams);
  
  const supabase = await createServerSupabaseClient();
  const { data: { user } } = await supabase.auth.getUser();

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

    return (
    <>
      <header className="bg-gradient-to-b from-accent/80 to-background">
        <div className="max-w-4xl mx-auto text-center pt-20 pb-12 px-4">
          <h1 className="text-4xl font-serif tracking-tight text-foreground sm:text-6xl">
            {category.title}
          </h1>
          {category.description && (
            <p className="mt-6 max-w-2xl mx-auto text-lg text-foreground/80">
              {category.description}
            </p>
          )}
        </div>
      </header>

      {/* --- MAIN CONTENT AREA --- */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* The filter bar sits on top of the product grid */}
        <ProductFilters />

        <div className="mt-8">
            {products.length > 0 ? (
                <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
                {products.map((product: any) => (
                    <ProductCard key={product._id} product={product} userId={user?.id} />
                ))}
                </div>
            ) : (
                <div className="text-center py-16 border-2 border-dashed rounded-lg">
                <p className="text-lg text-muted-foreground">No products found matching your filters.</p>
                </div>
            )}
        </div>
      </main>
    </>
  );
}

What I've already Tried:

• The code works perfectly on localhost.
• Adding a // @ts-expect-error comment above the function causes an "Unused directive" error locally but still fails on Vercel.
• Changing the prop types to any ({ params }: any) still results in a build failure.
• Adding the --no-lint flag to my build script confirms this is a TypeScript compiler error, not an ESLint rule violation.
• Await the params to get the slug

What is the correct, official way to type the params prop for a dynamic Server Component in Next.js 15 to avoid this build error on Vercel?

Answer 1

As per the NextJs documentation both the slug and the searchParams are Promises which have to be awaited.
That's also what the error is pointing out:

  Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

For the solution you need to change the definition of your CategoryPageProps to this:

interface CategoryPageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

And then in your CategoryPage function export you'll have to await these promises:

export default async function CategoryPage({
  params,
  searchParams,
}: CategoryPageProps) {
  const { slug } = await params;
  const resolvedSearchParams = await searchParams;
  
  const { category, products } = await getData(slug, resolvedSearchParams);
  //...

You will also want to change the signature of the getData function to this:

async function getData(
  slug: Awaited<CategoryPageProps['params']>['slug'], 
  searchParams: Awaited<CategoryPageProps['searchParams']>
) {
    //...

If you want to learn more about types I'd suggest the typescript documentation and the typescript playground

Answer 2

Try this one, it worked for me.

Turn params: { slug: string }; into params: Promise<{ slug: string }>, and use it in your component like:

export default async function CategoryPage({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const { slug } = await params;
  const sParams = await searchParams;
  const { category, products } = await getData(params.slug, sParams);
  //...

I had the same problem before, where it worked fine in development but failed on build in production (only Netlify instead of Vercel). This is how I fixed it.