reactjs - Gatsby 错误无法读取 null 的属性 'fixed'

Question

我想在索引页的菜单部分显示我的产品。我尝试显示来自 contentful API 的文本和图像等内容，但出现此错误:

TypeError: Cannot read property 'fixed' of null
src/components/HomePageComponents/Product.js:6
3 | import { styles } from "../../utils"
4 | import Img from "gatsby-image"
5 |
6 | export default function Product({ product }) {
7 | const { name, price, ingredients } = product
8 | const { fixed } = product.img

这是我的 Product.js

import React from "react"
import styled from "styled-components"
import { styles } from "../../utils"
import Img from "gatsby-image"

export default function Product({ product }) {
  const { name, price, ingredients } = product
  const { fixed } = product.img

  return (
    <ProductWrapper>
      <Img fixed={fixed} className="img" />
      <div className="text">
        <div className="product-content">
          <h3 className="name">{name}</h3>
          <h3 className="price">{price}</h3>
        </div>
        <p className="info">{ingredients}</p>
      </div>
    </ProductWrapper>
  )
}

const ProductWrapper = styled.div`
  @media (min-width: 576px) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1rem;
  }
  .img {
    border-radius: 0.5rem;
  }
  .product-content {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    text-transform: uppercase;
  }
  .name {
    color: ${styles.colors.mainYellow};
    margin-top: 0.5rem;
  }
  .price {
    color: ${styles.colors.mainYellow};
    margin-top: 0.5rem;
  }
  .info {
    margin-top: 0.5rem;
    word-spacing: 0.2rem;
    text-transform: lowercase;
  }
`

这是我的 Menu.js

import React from "react"
import Product from "./Product"
import { StaticQuery, graphql } from "gatsby"
import { Section, Title } from "../../utils"
import styled from "styled-components"
// import { Link } from "gatsby"

export default function Menu() {
  return (
    <Section>
      <Title title="Featured items" message="Little taste" />
      <ProductList>
        <StaticQuery
          query={graphql`
            {
              items: allContentfulMenu {
                edges {
                  node {
                    name
                    price
                    id
                    ingredients
                    img {
                      fixed(width: 150, height: 150) {
                        ...GatsbyContentfulFixed_tracedSVG
                      }
                    }
                  }
                }
              }
            }
          `}
          render={data => {
            return data.items.edges.map(item => {
              return <Product key={item.node.id} product={item.node} />
            })
          }}
        />
      </ProductList>
    </Section>
  )
}

const ProductList = styled.div`
  margin: 3rem 0;
  display: grid;
  grid-template-columns: 100%;
  grid-row-gap: 3rem;
  @media (min-width: 576px) {
    grid-template-columns: 95%;
  }
  @media (min-width: 776px) {
    grid-template-columns: 80%;
    justify-content: center;
  }
  @media (min-width: 992px) {
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
  }
`

Answer 1

似乎在 Contentful 字段中没有指定图像。因此，fixed 值为 null 并且他们的插件 gatsby-source-contentful 不允许这样做。