我在部署我的nextjs应用程序时收到“TypeError：无法读取未定义的属性（读取'title'）”的错误

import groq from 'groq'
import imageUrlBuilder from '@sanity/image-url'
import {PortableText} from '@portabletext/react'
import client from '../../../../client'
import Image from 'next/image'

function urlFor (source) {
  return imageUrlBuilder(client).image(source)
}

const ptComponents = {
  types: {
    image: ({ value }) => {
      if (!value?.asset?._ref) {
        return null
      }
      return (
        <Image
          alt={value.alt || ' '}
          src={urlFor(value).width(320).height(240).fit('max').auto('format')}
        />
      )
    },
  }
}

const post = ({post}) => {
  const {
    title = 'Missing title',
    name = 'Missing name',
    categories,
    authorImage,
    body = []
  } = post
  return (
    <article className="max-w-prose mx-auto p-4 mt-24 shadow-2xl">
      <h1 className="text-3xl font-bold mb-2">{title}</h1>
      <span className="text-gray-500">By {name}</span>
      {categories && (
        <ul className="mt-2 mb-4">
          Posted in 
          {categories.map((category) => (
            <li key={category} className="inline-block mr-2 text-blue-500">
              {category}
            </li>
          ))}
        </ul>
      )}
      {authorImage && (
        <div className="mb-4">
          <img
            className="w-12 h-12 rounded-full"
            src={urlFor(authorImage).width(50).url()}
            alt={`${name}'s picture`}
          />
        </div>
      )}
      <PortableText value={body} components={ptComponents} />
    </article>
  );
};

const query = groq`*[_type == "post" && slug.current == $slug][0]{
  title,
  "name": author->name,
  "categories": categories[]->title,
  "authorImage": author->image,
  body
}`
export async function getStaticPaths() {
  const paths = await client.fetch(
    groq`*[_type == "post" && defined(slug.current)][].slug.current`
  )

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

export async function getStaticProps(context) {
  // It's important to default the slug so that it doesn't return "undefined"
  const { slug = "" } = context.params
  const post = await client.fetch(query, { slug })

  if (!post) {
    return {
      notFound: true, // or handle the error in another way
    }
  }

  return {
    props: {
      post
    }
  }
}
export default post

import Link from 'next/link'
import groq from 'groq'
import client from '../../../client'

const Index = ({ posts }) => {
  return (
    <div className='relative mx-4 md:mx-24 lg:mx-96 mt-16 md:mt-24 lg:mt-40'>
      <h1 className='text-3xl mb-6'>Welcome to a blog!</h1>
      <ul>
        {posts.length > 0 && posts.map(
          ({ _id, title = '', slug = '', publishedAt = '' }) =>
            slug && (
              <Link key={_id} href={`/blogs/stock_market/post/${encodeURIComponent(slug.current)}`} legacyBehavior>
                <a className='block border border-gray-300/20 p-4 mb-4 z-50 rounded-lg'>
                  <span className='font-serif text-lg'>
                    {title}
                  </span>
                  <br/>
                  ({new Date(publishedAt).toDateString()})
                </a>
              </Link>
            )
        )}
      </ul>
    </div>
  )
}

export async function getStaticProps() {
  const posts = await client.fetch(groq`
    *[_type == "post"] | order(publishedAt desc)
  `)
  return {
    props: {
      posts
    }
  }
}

export default Index