键入 '{ 类别：类别； }' 不可分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“类别”

Question

我是 TypeScript 和 NextJS 的初学者，我遇到了一个问题，由于 IntrinsicAttributes 错误，我无法将数据传递到我的表单。这是我遇到的错误。

Type '{ category: Category; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'category' does not exist on type 'IntrinsicAttributes'.

我正在尝试将类别发送到编辑类别表单，但上述错误出现在 EditCategoryForm 的类别属性中。

export default async function EditCategoryPage({
  params,
}: {
  params: { id: string };
}) {
  const id = params.id;
  const category = await getCategoryById(id);

  return (
    <main>
      ...
      <EditCategoryForm category={category} />
    </main>
  );
}

这是我的编辑类别表格。

export default function EditCategoryForm({ category }: { category: Category }) {
 ...
}

这是我的类别类型。

export type Category = {
  id: number;
  name: string;
  //   subcategories: Subcategory[];
  subcategories: Subcategory[];
};

这就是我获取数据的方式。数据已正确获取。

export async function getCategoryById(id: string) {
  noStore();
  try {
    const response = await fetch(API_URL_CATEGORIES + "/" + id + "/");
    const body: Category = await response.json();
    return body;
  } catch (error) {
    console.error("Database Error:", error);
    throw new Error("Failed to fetch category.");
  }
}

由于此错误，我无法查看表格。我是否声明道具错误？什么是内在属性错误？不过我已经顺利通过了一切。

Answer 1

1. 在 EditCategoryForm 中，确保您正确访问类别对象的属性。 例如：

2. 如果使用 {...category} 解决了您的特定问题，可能是因为类别对象包含预期在 EditCategoryForm 组件中作为单独 props 的属性。但这可能并不总是最好的解决方案

参考

类型“{}”不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes”