React遍历嵌套JSON项目数组时无法访问内部属性的问题求助

我现在有点犯难，遇到了个小问题。我有一个JSON文件，里面有多个项目嵌套在一个数组中，结构如下：

"projects": [
    {
      "projectOne": {
        "id": "id1",
        "company": "company1",
        "heading": "heading",
        "link": "link",
        "heroImage": "imageLink"
      }
    },
    {
      "projectTwo": {
        "id": "id2",
        "company": "company2",
        "heading": "heading",
        "link": "link",
        "heroImage": "imageLink"
      }
    },
]

我想遍历每个项目，所以用下面这段代码来获取JSON里的projects数组。我还想给每个项目命名，这样之后在其他地方能更方便地访问它们。

const projects = props.cmsData.projects

{projects.map(project => {
   return <WorkGridItem {...project} key={project.id} />
})}

然后在对应的组件里我是这么写的：

export default function WorkGridItem(props) {
  return (
    <div className={`${styles.item} fadeIn`} id={props.id}>
      <div>
        {props.heroImage && (
          <div className={`${styles.imageContainer}`}>
            <Image
              src={props.heroImage}
              fill
              alt={props.id} />
          </div>
        )
        }
      </div>

但现在我没法访问到这些属性。我大概知道问题出在哪——我现在其实只是在遍历"projectOne"、"projectTwo"这些键名，而没有深入到内部对象里去获取id和heroImage这些属性，但我不知道该怎么修改才能正确拿到内部的这些属性。

备注：内容来源于stack exchange，提问作者Shane Harley