I’m getting stuck on this TS error created at build time. Does anyone has any suggestions?
TypeError: Cannot destructure property ‘site’ of ‘(intermediate value)’ as it is undefined.
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,
}
}
>Solution :
You can’t destructure it
Better to have an early return (in my opinion), and then continue as normal
if (!data) {
return null
}
const { site, page } = data.post;
// Continue on
...