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

1 messages · Page 1 of 1 (latest)

dim sonnetBOT
#

Hi @low violet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message is indicating that the type of params in your props does not match the expected type. You've defined tParams as a Promise that resolves to an object with a slug property which is an array of strings. However, in your function PostPage, you're passing an object with params as a property directly, not a Promise.

If you want to keep tParams as a Promise, you should resolve the Promise before passing it to PostPage. However, it seems like you might be misunderstanding how to use Promise and async/await. Typically, you would not pass a Promise as a prop. Instead, you would resolve the Promise (with await or .then()) and then pass the resulting value as a prop.

Here's how you might adjust your code:

type tParams = { slug: string[] };

export default async function PostPage(props: { params: tParams }) {
    const { slug } = props.params;
    const postSlug = slug[0]; // Access the first element of the slug array
    const post = await getPostBySlug(postSlug);

    if (!post) return notFound();

    const tableOfContents = generateTableOfContents(post.content);
}

In this adjusted code, tParams is an object with a slug property that is an array of strings. When you pass params to PostPage, you pass the slug array directly, not a Promise. Then, inside PostPage, you can access the elements of the slug array directly.

Please note that this is based on the assumption that getPostBySlug function accepts a string as an argument and slug is an array of strings. If this is not the case, you might need to adjust the code accordingly.

#

@low violet Kapa.ai is still learning and improving, please let me know how I did by reacting below.