Введите ошибку при попытке импортировать реквизиты страницы в следующей форме JS ⇐ Javascript

[Anonymous]

Код: Выделить всё

Type error: Type '{ params: { type: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ type: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]
< /code>
Это ошибка, которую я получаю, пытаясь импортировать некоторые реквизиты. < /p>
Цель этого кода - импортировать его с динамического в соответствии с URL или нажатой кнопкой и отображает его соответствующим образом. Это сделано для уменьшения количества отдельных страниц и создания равномерного формата URL.  < /p>
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import * as form from "@/components/forms";

const formMap: Record = {
client: form.ClientForm,
invoice: form.InvoiceForm,
};

export default async function DynamicFormPage({ params }: { params: { type: string } }) {
const FormComponent =await formMap[params.type];

return (



Home


New


{params.type}








);
}
< /code>
, в то время как пример, которую я использую, является < /p>
"use client";

//frontend imports
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import * as field from "@/components/forms/fields";
import RadioField from "@/components/forms/fields/RadioField";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

//backend imports
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const clientSchema = z.object({
businessName: z.string().min(4, "Company name too short!!"),
})

export default function ClientForm() {

const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(clientSchema),
mode: "onBlur",
});

const onSubmit = (data: any) => {
console.log("Valid data:", data);
};

return (



Basic Information








Tax Information (Optional)








Address (Optional)









Shipping Details (Optional)









Additional Details (Optional)





  handleChange("showEmail", val === true)}
/>
Show Email in Invoice





Account Details (Optional)








);
}

(Руководство по отдыху: установите хлебный и аккордеонный компонент из Shadcn и поместите код страницы в каталог, такой как app/new/[type]/page.tsx и код формы в любой каталог с правильным путем.) ждал. Также спросил несколько AIS, но никто из них не смог решить проблему. Вы также можете рекомендовать другие изменения в коде, кроме проблемы, так как я новый разработчик, поэтому я мало знаю об оптимизации и безопасности.

Подробнее здесь: https://stackoverflow.com/questions/797 ... xt-js-form