ReactJS映射嵌套的JSON并获取其值

我试图映射嵌套的JSON，但我得到的“元素隐式地有一个”any“类型”

搜索组件中的错误发生在：

Object.keys(skills[keyName]).map()

以下是我的组件：

import skills from "./skills.json";

const Search = () => {
  return (
    <div className="iterate-object">
      {Object.keys(skills).map(function (keyName: string, keyIndex: number) {
        return (
          <ul key={keyIndex}>
            {keyName}
            {Object.keys(skills[keyName]).map(function (
              keyName: string,
              keyIndex: number
            ) {
              return <li>{keyName}</li>;
            })}
          </ul>
        );
      })}
    </div>
  );
};

export default Search;

这是带有复制错误的codesandbox链接

---

编辑：我还有一个问题。要访问“图标”和“标签”，我必须做些什么？

出现错误是因为

keyName

的类型是

string

，而要能够使用该键访问

技能

对象属性，它必须是

工程|科学|创意|营销|业务

（因为这些是

skills

对象唯一可能的键/属性名称）

要使其工作，您可以将

keyName

从

string

强制转换为

keyof-typeof-skills

类型，换句话说，从

string

强制转换为

skills

对象的所有可能属性名称。如下所示：

...
const key = keyName as keyof typeof skills;

return (
  <ul key={keyIndex}>
    {keyName}
    {Object.keys(skills[key]).map(function (keyName: string, keyIndex: number) {
      return <li>{keyName}</li>;
    })}
  </ul>
);
...

。。。
const key=keyName作为技能类型的关键字；
返回(

{keyName}
{Object.keys（skills[key]）.map（函数（keyName:string，keyIndex:number）{
返回
{keyName}
；
})}

);
...