reactjs - 仅在显示道具时出现 Vercel 部署错误（在本地工作）

问题描述

我正在构建一个无头 wordpress CMS（并使用 next.js 模板）。

我能够成功部署到vercel服务器，然后开始添加一些内容，在这种情况下是Wordpress标题字段..这在我的本地服务器上效果很好，并且可以正确显示标题而没有错误..但是当我更新时我的 git 它杀死了 vercel 部署，我收到了这个错误。如果我尝试使用内容或危险的 SetHTML，我也会收到这个错误

澄清一下，如果我删除它，它会很好地部署 { page.title }

Unhandled error during request: TypeError: Cannot read property 'title' of undefined
--
17:01:15.529 | at Page (/vercel/workpath0/.next/serverless/pages/[slug].js:1634:412)

这是我的页面代码 [slug].js


import Head from 'next/head'
import Link from 'next/link'
import Container from '../components/container'
import MoreStories from '../components/more-stories'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getAllPagesWithSlug, getAllPagesBySlug } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'


export default function Page( {page} ) {

  return (
    <>
      <Layout>
        <Head>
          <title></title>
        </Head>
       <Header />
        <Container>
        
        { page.title }
          
        </Container>
      </Layout>
    </>
  )
}


export async function getStaticProps({ params }) {
    
  const data = await getAllPagesBySlug(params.slug)
  console.log(data)
  
  
  return {
    props: {
      page: data.page,
  
    },
  }
}

export async function getStaticPaths() {
  const allPages = await getAllPagesWithSlug()

  return {
     
     //paths:  [ { params: { slug: '${node.uri}' } }  ],
    paths: allPages.edges.map(({ node }) => `/${node.slug}`) || [],
    fallback: true,
  }
}

这是我的查询 lib/api

const API_URL = process.env.WORDPRESS_API_URL

async function fetchAPI(query, { variables } = {}) {
  const headers = { 'Content-Type': 'application/json' }

  if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
    headers[
      'Authorization'
    ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
  }

  const res = await fetch(API_URL, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      query,
      variables,
    }),
  })

  const json = await res.json()
  if (json.errors) {
    console.error(json.errors)
    throw new Error('Failed to fetch API')
  }
  return json.data
}

export async function getAllPagesBySlug($id) {
  const data = await fetchAPI(`
    {
     
        page(id: "${$id}", idType: URI) {
            uri
            slug
            content
            title
            featuredImage {
              node {
                sourceUrl
              }
            }
          }
    }
  `)
  return data
}

标签： reactjsnext.jsvercel

reactjs - 仅在显示道具时出现 Vercel 部署错误（在本地工作）

问题描述

解决方案

推荐阅读