Implementing Tanstack query with NextJS

[Nassefferjeni]

I am still kinda new to the NextJS/Tanstack world and I just stumbled upon a weird problem

so that is my project structure

I have an issue with building my application ( it just works fine locally but if i build it to vercel it fails )

so i have a custom invoice id url that i am trying to use to fetch my data

import { auth } from "@clerk/nextjs/server";
import InvoicePage from "./InvoicePage";

export default async function Home({
  params,
}: {
  params: { invoiceId: string };
}) {
  const { invoiceId: invoiceIdStr } = params;
  const invoiceId = parseInt(invoiceIdStr);
  const authResult = await auth();
  const { userId, orgId } = authResult;

  if (isNaN(invoiceId)) {
    throw new Error(`Invoice ID must be a number`);
  }

  if (!invoiceId) {
    return null;
  }

  return <InvoicePage invoiceId={invoiceId} userId={userId} orgId={orgId} />;
}

so first i try to get my id from the params

and then inside invoicePage i am doing this and it just works perfectly

  const { data, isLoading } = useQuery({
    queryKey: [`invoices`, invoiceId, userId, orgId],
    queryFn: () => getInvoice(invoiceId),
  });

Once I try to build the app I am prompted with this:

.next/types/app/invoices/[invoiceId]/page.ts:34:29
Type error: Type '{ params: { invoiceId: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ invoiceId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

  32 |
  33 | // Check the prop type of the entry function
> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |                             ^
  35 |
  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {

Which leads me to believe that maybe the way i am trying to use the id from the url is not the correct way to do so?

has anybody experienced this before?

[Nassefferjeni]

Actually that's my bad

All I had to do is this

const Page = async ({ params }: { params: Promise<{ invoiceId: string }> }) => {