使用 Gatsby Typescript Graphql Codegen 的 Gatsby/Contentful/Typescript 项目中的 Typescript 错误

Question

我正在尝试清理 Gatsby/Contentful 页面上的一些打字稿错误。所有错误都已解决，但我在(copy: Maybe<ContentfulText>) 的<ItemDescription key={list.id}> 块中得到一个。我不知道如何解决这个问题。

'(copy: Maybe) => JSX.Element' 类型的参数不能分配给'(value: Maybe<ContentfulHeroContentfulLinkContentfulListContentfulMediaContentfulPageContentfulProductContentfulResourceCenterArticleContentfulServiceContentfulTextUnion>, index: number, array: Maybe<...>[]) => Element' 类型的参数。

参数“copy”和“value”的类型不兼容。 类型 'Maybe<ContentfulHeroContentfulLinkContentfulListContentfulMediaContentfulPageContentfulProductContentfulResourceCenterArticleContentfulServiceContentfulTextUnion>' 不能分配给类型“也许”。

import React from 'react'
import { graphql } from 'gatsby'
import styled from '@emotion/styled'
import tw from 'twin.macro'
import SEO from '../../components/SEO'
import {
  ContentfulFeatureContent,
  ContentfulList,
  ContentfulMedia,
  ContentfulPage,
  ContentfulText,
  Maybe,
} from '../../../types/graphql-types'
import Layout from '../../components/Layout/Layout'

interface Props {
  data: {
    contentfulPage: ContentfulPage
  }
}

const MyPage: React.FC<Props> = ({ data }: Props) => {

  return (
    <Layout>
      <SEO
        title={data.contentfulPage.seoTitle as string}
        description={data.contentfulPage.seoDescription as string}
      />
      {data.contentfulPage.references?.map(content => {
        const featureContent = content as Maybe<ContentfulFeatureContent>
        const list = content as Maybe<ContentfulList>
        if (featureContent?.externalName === 'Feature Content 1') {
          return (
            <section
              className="content-section lg:grid lg:grid-cols-2"
              key={featureContent.id}
            >
              <div className="grid col-span-2 content-center text-left md:text-center mb-3">
                {featureContent.references?.map(
                  (copy: Maybe<ContentfulText>) => {
                    if (copy?.externalName === 'Feature Content Copy') {
                      return (
                        <div key={copy.id}>
                          <HeaderContentContainer
                            className="lg:w-9/12 lg:m-auto"
                            dangerouslySetInnerHTML={{
                              __html: copy?.longSimpleText?.childMarkdownRemark
                                ?.html as string,
                            }}
                          ></HeaderContentContainer>
                        </div>
                      )
                    }
                  }
                )}
              </div>
              <div className="w-full block pb-8">
                {featureContent.references?.map(
                  (image: Maybe<ContentfulMedia>) => {
                    if (image?.externalName === 'Feature Content Image') {
                      return (
                        <img
                          className="mx-auto"
                          key={image.id}
                          alt={image.altText as string}
                          src={image.media?.file?.url as string}
                        />
                      )
                    }
                  }
                )}
              </div>
              {featureContent.references?.map((list: Maybe<ContentfulList>) => {
                if (list?.externalName === 'Generic') {
                  return (
                    <ItemDescription key={list.id}>
                      {list?.items?.map((copy: Maybe<ContentfulText>) => {
                        return (
                          <li key={copy?.id}>
                            <h3 className="mb-5">{copy?.shortSimpleText}</h3>
                          </li>
                        )
                      })}
                    </ItemDescription>
                  )
                }
              })}
            </section>
          )
        }
      })}
    </Layout>
  )
}

export default MyPage

Answer 1

通过将块更新为此，我能够解决 TypeScript 错误。 (list?.items as ContentfulText[]).map(copy =>