如何解决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

你好

解决了filter、map等地方undefined的问题。对了，我想知道undefined在涉及到参数的时候怎么解决

我们已验证 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 会抛出错误。不要在参数本身中解构缩略图，只传递缩略图并在函数内部执行此操作。

const { publicURL } = {...thumbnail}

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

How can I solve the parameter undefined problem in a gatsby build environment?

typescript

reactjs

gatsby