I’m working on a Next.js 15 application and encountered the following TypeScript error:
app/(docs)/docs/[[…slug]]/page.tsx
Type error: Type ‘DocPageProps’ does not satisfy the constraint ‘PageProps’.
Types of property ‘params’ are incompatible.
Type ‘{ slug?: string[] | undefined; }’ is missing the following properties from type ‘Promise<any>’: then, catch, finally, [Symbol.toStringTag]
for code here is repo link
‘https://github.com/yakkshit/ui/blob/main/app/(docs)/docs/%5B%5B…slug%5D%5D/page.tsx’
I tried async, await but still i’m getting the same error.
here is the code
interface DocPageProps {
params: {
slug?: string[];
};
searchParams: { [key: string]: string | string[] | undefined };
}
async function getDocFromParams(params: DocPageProps['params']) {
const slug = await params.slug?.join("/") ?? "";
const doc = await allDocs.find((doc) => doc.slugAsParams === slug);
if (!doc) {
return null;
}
return doc;
}
export async function generateMetadata({
params,
}: DocPageProps): Promise<Metadata> {
const doc = await getDocFromParams(params);
if (!doc) {
return {};
}
return {
title: `${doc.title} | Lingo UI`,
description: doc.description,
openGraph: {
title: doc.title,
description: doc.description,
type: "article",
url: absoluteUrl(doc.slug),
images: [
{
url: doc.image,
width: 1200,
height: 630,
alt: siteConfig.name,
},
],
},
twitter: {
card: "summary_large_image",
title: doc.title,
description: doc.description,
images: [doc.image],
creator: "@yakkshit",
},
};
}
export async function generateStaticParams(): Promise<
DocPageProps["params"][]
> {
return allDocs.map((doc) => ({
slug: doc.slugAsParams.split("/"),
}));
}
export default async function DocPage({ params, searchParams }: DocPageProps) {
const doc = await getDocFromParams(params);
if (!doc || !doc.published) {
notFound();
}
const toc = await getTableOfContents(doc.body.raw);