How to fix the Error: Route used `searchParams.priceTo`. `searchParams` should be awaited before using its properties

Question

I have the same problem. Next.JS I'm trying to get get parameters via an async request. but the console always displays this error

Already exhausted everything AI Chat no one can give Maybe you have had this and can help with this?

interface SearchParams {
  place?: string;
  season?: string;
  priceFrom?: string;
  priceTo?: string;
  type?: string;
  rooms?: string;
  services?: string;
  categoryRooms?: string;
  sort?: string;
}

interface FindProps {
  searchParams: SearchParams;
}


export default async function Find({ searchParams }: FindProps) {

  const place = searchParams.place ?? '';
  const season = searchParams.season ?? '';
  const priceFrom = searchParams.priceFrom ?? '';
  const priceTo = searchParams.priceTo ?? '';
  const type = searchParams.type ?? '';
  const services = searchParams.services ?? '';
  const rooms = searchParams.rooms ?? '';
  const categoryRooms = searchParams.categoryRooms ?? ''; 
  const sort = searchParams.sort ?? '';


  return (
    <div>
    </div>
  );
}

Answer 1

In Next 15, these dynamic APIs(params and searchParams as well as cookies(), draftMode(), and headers() from next/headers) have been made asynchronous.

Access the properties this way

// For client components
const { id } = React.use(params)

// For server components
const { id } = await params

So in your case,
const { place, season, priceFrom } = await searchParams