reactjs - 当我将数据映射到组件时，GraphQL 和 TypeScript 的问题

我正在用 GraphQL 和 Next.js 做一个 SSR，但当我尝试映射一些数据时遇到了问题。

我正在从 Github GraphQL API 获取一些数据（关注者、正在关注、公开仓库），当我把这些数据传给代码时，我的所有数据都正常工作。但当我尝试映射我的展示仓库以在屏幕上打印时，问题就出现了，有人能帮我吗？

我目前的技术栈是 GraphQL（GraphQl-request）、Next.js、styled-components 和 TypeScript。

这是我的查询：

  fragment totalFollowing on User {
    following(first: 1) {
      totalCount
    }
  }

  fragment totalFollowers on User {
    followers(first: 1) {
      totalCount
    }
  }

  fragment totalRepositories on User {
    repositories(affiliations: OWNER, first: 1) {
      totalCount
    }
  }

  fragment showcase on User {
    itemShowcase {
      items(first: 10) {
        nodes {
          ... on Repository {
            name
            description
            url
          }
        }
      }
    }
  }

  query GET_GITHUB_QUERIES {
    viewer {
      ...totalFollowing
      ...totalFollowers
      ...totalRepositories
      ...showcase
    }
  }

这是我目前的类型：

export type FollowingProps = {
  totalCount: number
}

export type FollowersProps = {
  totalCount: number
}

export type RepositoriesProps = {
  totalCount: number
}

export type itemShowCaseProps = {
  itemShowcase: {
    items: {
      nodes: [
        {
          name: string
          description: string
          url: string
        }
      ]
    }
  }
}

export type QueryProps = {
  following: FollowingProps
  followers: FollowersProps
  repositories: RepositoriesProps
  itemShowcase: itemShowCaseProps
}

我在 index.tsx 上的调用

export const getStaticProps: GetStaticProps = async () => {
  const { viewer } = await client.request(query)

  return {
    props: {
      ...viewer
    }
  }
}

仍然在我的 index.tsx 中，我有这个组件，我需要传递数据：

      <S.MyWorkSection id="my-work" data-aos="fade-up">
        <MyWorkGithub
          repositories={repositories}
          following={following}
          followers={followers}
          {...{ itemShowcase }}
        />
      </S.MyWorkSection>

最后，这是我的组件：

const MyWorkGithub: React.FC<QueryProps> = ({
  following,
  followers,
  repositories,
  itemShowcase
}) => (
  <>
    <Title text="Works" icon={true} />
    <S.HighLightWrapper>
      <HighLightCard
        hlNumber={repositories.totalCount}
        hlDescription={'repositories'}
      />
      <HighLightCard
        hlNumber={followers.totalCount}
        hlDescription={'followers'}
      />
      <HighLightCard
        hlNumber={following.totalCount}
        hlDescription={'following'}
      />
    </S.HighLightWrapper>
    <S.CardWrapper>
      {itemShowcase.itemShowcase.items.nodes.map((repo, index) => (
        <CardComponent
          key={index}
          url={repo.url}
          name={repo.name}
          description={repo.description}
        />
      ))}
    </S.CardWrapper>
  </>
)

这是我的错误：

TypeError: cannot read property 'items' of undefined
<SCardWrapper>
  {itemShowcase.itemShowcase.items.node.map((repo, index) => (
...

https://i.sstatic.net/vzuj3.png

其他数据，如仓库、粉丝和关注仍然能正常工作。

编辑：当我打开 Github Explorer 时，所有数据都是正常的。