如何在gatsby构建环境中解决参数未定义的问题？

Question

Building static HTML failed for path "/main/postItem/"

 

See our docs page for more info on this error: https://gatsby.dev/debug-html

 

 

  19 |   categories,

  20 |   summary,

> 21 |   thumbnail: { publicURL },

     |                ^

  22 |   link,

  23 | }) => {

  24 |   return (

 

 

  WebpackError: TypeError: Cannot read properties of undefined (reading 'publicURL')

  

  - postItem.tsx:21 

    gatsby-starter-default/src/pages/main/postItem.tsx:21:16

  

  - inheritsLoose.js:5 

    [gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:5:1

  

  - emotion-is-prop-valid.esm.js:15 

    [gatsby-starter-default]/[@emotion]/is-prop-valid/dist/emotion-is-prop-valid.esm.js:15:1

  

  - inheritsLoose.js:7 

    [gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:7:1

  

  - static-entry.js:294 

    gatsby-starter-default/.cache/static-entry.js:294:22

  

  - history.js:49 

    [gatsby-starter-default]/[@gatsbyjs]/reach-router/es/lib/history.js:49:6

你好。

我解决了在过滤器和地图等地方未定义的问题。顺便说一句，我想知道当涉及到参数时，如何解决未定义的问题。

我们已经证实publicURL存在于http://localhost:8000/__graphql。

import React, { FunctionComponent } from 'react'
import styled from '@emotion/styled'
import { Link } from 'gatsby'

type PostItemProps = {
  title: string
  date: string
  categories: string[]
  summary: string
  thumbnail: {
    publicURL?: string
  }
  link: string
}

const PostItem: FunctionComponent<PostItemProps> = ({
  title,
  date,
  categories,
  summary,
  thumbnail: { publicURL },
  link,
}) => {
  return (
    <PostItemWrapper to={link}>
      <Thumbnail>
        {publicURL ? <img src={publicURL} alt="이미지" /> : <></>}
      </Thumbnail>
      <InfoWrapper>
        <Title>{title}</Title>
        <Date>{date}</Date>
        {categories?.map(category => (
          <CategoryItem key={category}>{category}</CategoryItem>
        ))}
        <Summary>{summary}</Summary>
      </InfoWrapper>
    </PostItemWrapper>
  )
}

我要离开github地址以防万一。https://github.com/urther/example

谢谢。

Answer 1

如果缩略图未定义，publicURL将在试图从未定义的param访问值时抛出一个错误。不要破坏缩略图本身，只传递缩略图和在一个函数内这样做。

const { publicURL } = {...thumbnail}