我正在做的是阅读位于CardContainer组件中的React项目的public目录中的JSON文件，如下所示：

import { useAsync } from "react-async";

type ProjectData = {
    title: string,
    desc: string,
    website: string,
    repo: string,
    tags: Array<string>
}

type ProjectContainerData = {
    projects: Array<ProjectData>
}

async function getData() {
  let output: ProjectContainerData | undefined = undefined;
  await fetch("/myProjects.json")
    .then((response) => response.text())
    .then((data) => {
      output = JSON.parse(data);
    });
  return output;
}

function CardContainer() {
  const { data, error, isPending } = useAsync(getData);
    for (let project of data?["projects"]) {
      // error is here
    }
  return <></>;
}

export default CardContainer;

字符串
当我编辑代码时，我看到':' expected.ts(1005)错误。当我尝试用npm start编译它时，我看到了同样的事情：

ERROR in src/components/CardContainer.tsx:27:42
TS1005: ':' expected.
    25 | function CardContainer() {
    26 |   const { data, error, isPending } = useAsync(getData);
  > 27 |     for (let project of data?["projects"]) {
       |                                          ^
    28 |
    29 |     }
    30 |   return <></>;

型
我的TypeScript版本是4.9.5。有没有什么方法可以避免这种错误？