如果可能未定义，如何解构属性？

Question

我被困在构建时创建的这个 TS 错误上。有人有什么建议吗？

TypeError：无法解构“（中间值）”的属性“站点”，因为它未定义。

export default function Project({
  data,
  preview,
}: {
  data: any
  preview: any
}) {
  const { site, page } = data?.post

  return (
    <Layout site={site} page={page}>
      // Stuff
    </Layout>
  )
}

export async function getStaticProps({ params, preview = false }) {
  const { post, morePosts } = await getClient(preview).fetch(projectQuery, {
    slug: params.slug,
  })

  return {
    props: {
      preview,
      data: {
        post,
        morePosts: overlayDrafts(morePosts),
      },
    },
  }
}

export async function getStaticPaths() {
  const paths = await sanityClient.fetch(projectSlugsQuery)
  return {
    paths: paths.map((slug) => ({ params: { slug } })),
    fallback: true,
  }
}

Answer 1

你不能解构它

最好早点回来（在我看来），然后照常继续

if (!data) {
  return null
}

const { site, page } = data.post;

// Continue on
...

Answer 2

如果post 不存在，data?.post 将返回undefined，因此您必须添加一个倒退目的。

const { site, page } = data?.post || {};

Answer 3

如果没有要解构的源，您就无法解构，但您可以通过空值合并使用默认值：

const { site, page } = data?.post ?? {};
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^

您当前的data 是any 类型，因此应该可以工作，但如果它具有正确的类型，您可能需要为site 和page 提供默认值。例如，如果 data 的类型为 {post: {site: string; page: number; }; }：

const { site = "something", page = 42 } = data?.post ?? {};
// −−−−−−−−−^^^^^^^^^^^^^^−−−−−−^^^^^−−−−−−−−−−−−−−−^^^^^^