Javascript 盖茨比应用程序因错误而崩溃'；无法读取属性'；即使属性可以被控制台记录

我试图使用盖茨比使用无头CMS的图像，但当我访问我的“主图像”时，我得到一个错误，说明

TypeError:cannotreadproperty'

我的目标是能够使用盖茨比Img组件中的图像，如下所示：

   <Img fixed={props.mainImage.asset.fixed}
          alt={props.mainImage.alt}

当cms中至少没有一个您试图访问的数据实例时，通常会出现这种情况。我们使用的一种解决方法是在cms中创建占位符/虚拟数据。另一种方法是使用Gatsby.js模式定制设置默认/回退模式（有关更多信息，请参阅他们的文档）

还要确保你点击了你正在使用的无头cms中的published。例如，当我忘记点击cms中的“发布”时，我就遇到了这个问题。因此，内容处于草稿模式，盖茨比当时无法获得相关数据
 我可以使用Console.log查看CMS中的数据，我只是三联检查它是否已发布；包括图片。我可以通过手动打开console.log（props）或console.log（props.blogPosts.mainImage）中显示的链接来查看图像。结果表明，我有一个没有图像的旧数据模型，你看对了。我将previewFunction转换为一个名为previewFunction的箭头函数，它现在的名称是这样的
，即使存在props.id，我仍然会在chrome控制台中收到一条钥匙丢失警告
{data ? (
      <BlogPostPreviewGrid blogPosts={data} />
    ) : (
        <p>Could not get blog data</p>
      )
    }

const BlogPostPreviewGrid = ({blogPosts}) => {
    return (
    <div>   

     {blogPosts.posts.edges.map (({ node }) => (
                <BlogPostPreview blogPosts={node} key={node.id}/> 

            ))}
    </div>
    )

}

import React from "react"


function previewFunction(props) {
  return ( 
    <div>
    <h1>{props.blogPosts.title}</h1>
    {console.log(props.blogPosts)}
    {console.log(props.blogPosts.mainImage)}
  </div>
  )
}

const BlogPostPreview = props => {

  return (

    <>
          {props ? (
          previewFunction(props)
        ) : (
            <p>Failed to get blog data in blogPreview component</p>
          )
        }
    </>
  )
}
export default BlogPostPreview

{console.log(props.blogPosts.mainImage.alt)}

   <Img fixed={props.mainImage.asset.fixed}
          alt={props.mainImage.alt}

<h1>{props.blogPosts.title}</h1>