Next.js Discord

Discord Forum

Type error: Type '{ params: { slug: string; }; }' does not satisfy the constraint 'PageProps'.

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
constantly receiving the error, tried fixing with ai and search, and npm run build returns always the same error:


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

Next.js build worker exited with code: 1 and signal: null


import { BlogPost, getAllPosts, getPostBySlug } from "@/lib/blog"
import { BlogPostComponent } from "../../components/blog-post"
export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map(post => ({ slug: post.slug }))
}

export default async function BlogPage({ params }: { params: { slug: string } }) {
  const post: BlogPost | null = await getPostBySlug(params.slug)
  
  if (!post) {
    return <div>Post not found</div>
  }

  return (
    <main>
      <h1>{post.title}</h1> 
      <BlogPostComponent content={post.content} />
    </main>
  )
}

2 Replies

American black bearOP
@Asian black bear any ideas?
Greater Shearwater
params and searchParams are promises. So you need to type them as that and then await them.
export default async function BlogPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  //rest of your code
}