#Getting an Type error that i can't fix

1 messages · Page 1 of 1 (latest)

velvet forge
# 
src/app/p/[uploadId]/layout.tsx
Type error: Type '{ params: { uploadId: string; }; }' does not satisfy the constraint 'LayoutProps'.
  Types of property 'params' are incompatible.
    Type '{ uploadId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

the code:

import type { Metadata } from "next";
import { Viewport } from 'next';

export async function generateViewport({ params }: { params: { uploadId: string } }): Promise<Viewport> {
    try {
        const { uploadId } = await params;
        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
        const response = await fetch(`${baseUrl}/api/v1/public/storage/details/${uploadId}`);
        const data = await response.json();

        return {
            themeColor: data.file.embed.color || '#000000'
        };
    } catch (error) {
        return {
            themeColor: '#000000'
        };
    }
}

export async function generateMetadata({ params }: { params: { uploadId: string } }): Promise<Metadata> {
    try {
        const { uploadId } = await params;

        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
        const Assets = process.env.NEXT_PUBLIC_ASSETS || 'http://192.168.51.4:9000'
        const response = await fetch(`${baseUrl}/api/v1/public/storage/details/${uploadId}`);
        const data = await response.json();

        const metadata = {
            title: data.file.embed.title || "Lambda / Viewing File",
            description: data.file.embed.description || "Lambda - Private file hosting service",
            openGraph: {
                title: data.file.embed.title || "Lambda / Viewing File",
                description: data.file.embed.description || "Lambda - Private file hosting service",
                images: [{
                    url: `${Assets}/${data.file.objectPath}`,
                    width: 1200,
                    height: 630,
                    alt: data.file.filename
                }]
            },
            twitter: {
                card: 'summary_large_image',
                title: data.file.embed.title || "Lambda / Viewing File",
                description: data.file.embed.description || "Lambda - Private file hosting service",
                images: [`${Assets}/${data.file.objectPath}`]
            }
        };

        return metadata;
    } catch (error) {
        return {
            title: "Lambda / Viewing File",
            description: "Lambda - Private file hosting service",
        };
    }
}

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <div className="h-[100vh]">
            {children}
        </div>
    );
}
vital harnessBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

proper sparrow
#

params : Promise<{ uploadId : string }>

velvet forge
#

Thanks, this fixed it

proper sparrow
#

params and searchParams, among others, are promises now so they need to be typed as such, and awaited when accessing their value