import {Suspense} from "react"
type Props = {
params: Promise<{joblistingId: string }>
}
export default function JoblistingPage(props: Props) {
return (
<Suspense>
<SuspendedPage (...props) />
</Suspense>
)
}
async function SuspendedPage({params}: Props) {
const {jobListingId} = await params
const joblisting = await getJoblisting(joblistingId)
}
in this we are awaiting params which are promise.why it is passed down as promise?
Next.js 15+ makes params a Promise so the page can render and stream immediately without waiting for the dynamic segment to resolve.
You pass the unresolved Promise down and wrap the child in <Suspense> because:
The parent stays synchronous → starts streaming right away.
The child (async SuspendedPage) does await params → suspends safely.
React shows the Suspense fallback until the promise resolves, then streams in the real content.
That’s how Next.js achieves non-blocking, progressive rendering instead of waiting for everything upfront.
Source: Next.js 15 Release Blog
Not sure if I correctly understand your question, but params was already defined as a promise to begin with, thus no matter if you drill it down to the next component or not, it's still going to be a promise. (Regardless of whether you use Suspense or not.)
You're getting a Promise for params because you're using an async function as a React component (SuspendedPage). In Next.js server components, route params can be resolved asynchronously, especially when using dynamic routes. But React doesn't support rendering async functions directly in JSX, so calling <SuspendedPage {...props} /> like that won't work. You need to resolve the promise before rendering, or restructure the component to handle data fetching properly like this:
export default async function JoblistingPage({ params }: Props) {
const { joblistingId } = await params;
const joblisting = await getJoblisting(joblistingId);
return (
<Suspense>
<JoblistingContent joblisting={joblisting} />
</Suspense>
);
}
