接口不匹配数据答案

【问题标题】：interface not matching data接口不匹配数据
【发布时间】：2021-08-03 04:48:11
【问题描述】：

我不断收到此错误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 },
      ],
    },
  ];

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

【问题讨论】：

标签： reactjs typescript interface next.js

【解决方案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 },
      ],
    },
];

【讨论】：

【解决方案2】：

你需要删除 []:

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

并将 navigationItem[] 添加到：

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

CodeSandbox demo

【讨论】：

谢谢很多，我总是忘记指定这是一个数组