接口不匹配数据

Question

我一直收到这个错误Type '({ name: string; href: string; icon: IconDefinition; } | { name: string; href: string; icon: IconDefinition; childs: { name: string; href: string; icon: IconDefinition; }[]; })[]' is missing the following properties from type 'navigationItem': name, href, icon, childsts(2739)

但我不明白为什么。

这是我的界面

interface navigationItem {
  name: string;
  href: string;
  icon: IconDefinition;
  childs?: dropdown[];
}[]
interface dropdown {
  name: string;
  href: string;
  icon: IconDefinition;
}

和它的一些数据

 const navItems: navigationItem = [
    { name: "Calendar", href: "/", icon: faBars },
    { name: "Team", href: "/", icon: faBars },
    {
      name: "Projects",
      href: "/",
      icon: faBars,
      childs: [
        { name: "Accueil", href: "/", icon: faBars },
        { name: "Accueil", href: "/", icon: faBars },
      ],
    },
  ];

如果有人看到我做错了什么请随时告诉我:)

Answer 1

应该是[]

放错了

从接口

中删除最后一个[]

interface navigationItem {
  name: string;
  href: string;
  icon: IconDefinition;
  childs?: dropdown[];
} // no need to add [] here

在navigationItem类型中添加[]

const navItems: navigationItem[] = [ // add [] here
    { name: "Calendar", href: "/", icon: faBars },
    { name: "Team", href: "/", icon: faBars },
    {
      name: "Projects",
      href: "/",
      icon: faBars,
      childs: [
        { name: "Accueil", href: "/", icon: faBars },
        { name: "Accueil", href: "/", icon: faBars },
      ],
    },
];

Answer 2

您需要删除 []:

interface navigationItem {
  name: string;
  href: string;
  icon: IconDefinition;
  childs?: dropdown[];
}// this []

并将 navigationItem[] 添加到：

const navItems: navigationItem[] = {...}

CodeSandbox demo

接口不匹配数据

interface not matching data

interface

typescript

reactjs

next.js