如何解构可能为undefined的属性？解决TS构建报错问题

报错TypeError: Cannot destructure property 'site' of '(intermediate value)' as it is undefined的核心原因是data?.post可能为undefined，直接解构其属性会触发错误。以下是几种可行的解决方式：

1. 给解构目标设置默认空对象 #

通过空值合并运算符（??）或逻辑或（||）给data?.post设置默认空对象，确保解构操作始终有合法的目标：

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

或：

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

这样即使data.post是undefined，解构出的site和page会是undefined，不会抛出错误。

2. 提前校验post存在性再渲染 #

在渲染Layout组件前，先检查data.post是否存在，不存在时返回加载状态或错误提示：

export default function Project({ data, preview }) {
  if (!data?.post) {
    return <div>内容加载中或不存在</div>;
  }
  const { site, page } = data.post;
  return (
    <Layout site={site} page={page}>
      {/* 页面内容 */}
    </Layout>
  );
}

3. 优化TypeScript类型定义，避免any #

替换any类型为具体的接口定义，让TypeScript在编译阶段提前发现潜在问题：

// 定义具体的类型
interface Site {
  // 填写Site的属性，比如name: string; 等
}

interface Page {
  // 填写Page的属性
}

interface ProjectData {
  post?: {
    site?: Site;
    page?: Page;
  };
  morePosts: Array<any>; // 替换为morePosts的具体类型
}

interface ProjectProps {
  data: ProjectData;
  preview: boolean;
}

export default function Project({ data, preview }: ProjectProps) {
  const { site, page } = data?.post ?? {};
  return <Layout site={site} page={page}>...</Layout>;
}

4. 完善getStaticProps的数据校验 #

由于getStaticPaths设置了fallback: true，访问未预渲染的路径时可能获取不到post数据。在getStaticProps中校验post是否存在，不存在则返回404：

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

  // 若post不存在，返回404
  if (!post) {
    return { notFound: true };
  }

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

内容的提问来源于stack exchange，提问作者Burger Sasha