Next JS - Fallback 设置为 true 并检查返回无法读取未定义的属性“页面”？

问题描述

我正在开发我的 Next js 网站，我已将 "pages/[slug].js" getStaticPaths 设置为 true，并检查数据是否存在返回 404。

但出于某种原因，它只是跳过了回退和数据检查并尝试返回数据。我不知道为什么。

是什么导致了这个问题？它的工作原理非常简单，但无法正常工作。

我的代码：

import ErrorPage from 'next/error'
import { useRouter } from 'next/router'
import { groq } from 'next-sanity'

import { getClient,usePreviewSubscription,PortableText } from '@lib/sanity'

const pageQuery = groq`
  *[_type == "page" && slug.current == $slug][0] {
   _id,title,body,publishedAt,openGraphImage,openGraphAlt,openGraphDescription,featuredImage,"slug": slug.current,"author": author -> {name,picture},}
`

const Page = ({ data,preview }) => {
   const router = useRouter()
   if (!router.isFallback && !data) {
      return <ErrorPage statusCode={404} />
   }

   const {
      title,author,slug
   } = data.page

   const { data: page } = usePreviewSubscription(pageQuery,{
      params: { slug: data.page.slug },initialData: data,enabled: preview
   })

   return (
      <div>
         <h1>{title}</h1>
         {body && <PortableText blocks={body} />}
      </div>
   )
}

export default Page

export const getStaticProps = async ({ params,preview = false }) => {
   const page = await getClient(preview).fetch(pageQuery,{
      slug: params.slug
   })

   return {
      props: {
         preview: true,data: {
            page
         }
      }
   }
}

export const getStaticPaths = async () => {
   const paths = await getClient().fetch(
      groq`*[_type == "page" && defined(slug.current)][].slug.current`
   )

   return {
      paths: paths.map((slug) => ({ params: { slug } })) || null,fallback: true
   }
}

错误：

pages/[slug].js (38:12) @ Page

  36 |       openGraphDescription,37 |       slug
> 38 |    } = data.page
     |            ^
  39 | 
  40 |    const { data: page } = usePreviewSubscription(pageQuery,{
  41 |       params: { slug: data.page.slug },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）