Get help on Discord

Error in NextJS getStaticProps when destructuring property 'currentPost' as it is null.

8 replies
Last updated: Dec 15, 2021
Has anyone gotten
error - pages/[slug].tsx (171:10) @ getStaticProps
TypeError: Cannot destructure property 'currentPost' of '(intermediate value)' as it is null.
  169 |   })
  170 |
> 171 |   const { currentPost, previousPost, nextPost } = await getClient().fetch(
      |          ^
  172 |     postsTest,
  173 |     {
  174 |       slug: params?.slug,
using NextJS the call in my 
getStaticProps
looks like
const { currentPost, previousPost, nextPost } = await getClient().fetch(
    postsTest,
    {
      slug: params?.slug,
    }
  )
and that 
postsTest
query looks like
export const postsTest = groq`
*[_type == "post" && slug.current == $slug]{
  "currentPost": {
    ${postFields}
  },
  "previousPost": *[_type == "post" && ^.publishedAt > publishedAt]|order(publishedAt desc)[0]{title,slug},
  "nextPost": *[_type == "post" && ^.publishedAt < publishedAt]|order(publishedAt asc)[0]{title,slug}
}|order(publishedAt)[0]
`

AI Update

I've seen this error before! The issue is with how your GROQ query is structured. Your query is returning null when no matching post is found, and then you're trying to destructure properties from null, which causes the error.

The problem is in your query structure. You're filtering for posts matching the slug, then trying to project currentPost, previousPost, and nextPost for each result, and finally taking [0]. When there's no post with that slug, the filter returns an empty array, and [0] on an empty array gives you null.

Here's how to fix it:

*[_type == "post" && slug.current == $slug][0]{
  "currentPost": {
    ${postFields}
  },
  "previousPost": *[_type == "post" && ^.publishedAt > publishedAt]|order(publishedAt desc)[0]{title,slug},
  "nextPost": *[_type == "post" && ^.publishedAt < publishedAt]|order(publishedAt asc)[0]{title,slug}
}

The key change is moving [0] before the projection {} instead of after. This way:

  • You first get the matching post document (or null if none exists)
  • Then you project the fields you want

Now in your getStaticProps, you should also add a null check:

const result = await getClient().fetch(postsTest, {
  slug: params?.slug,
})

if (!result) {
  return {
    notFound: true,
  }
}

const { currentPost, previousPost, nextPost } = result

This will properly handle cases where someone navigates to a slug that doesn't exist, returning a 404 instead of crashing.

The destructuring error happens because when your query returns null, JavaScript can't destructure properties from it. By checking for null first and returning notFound: true, Next.js will show a 404 page instead of throwing an error.

It’s because the filters return 
null
 on no hits. So you either need to coalesce them into an empty object, or deal with the 
null
 in JS land
*[_type == "post"]{
  title,publishedAt,
  "previous": 
  coalesce(*[_type == "post" && ^.publishedAt > publishedAt && false]|order(publishedAt desc)[0]{title,publishedAt}, {}),
  "next": 
coalesce(*[_type == "post" && ^.publishedAt < publishedAt]|order(publishedAt asc)[0]{title,publishedAt}, {})
}|order(publishedAt)
But it shouldn't be hitting null in the cases I am running into this issue
Can it be because it’s the last or first post?
Nope, 
<http://localhost:3000/2021-fcs-playoffs-semifinal-schedule-is-set>
is definitely not the first article nor the last. It seems like when I navigate to an article then navigate back it causes the issue 🤔
It is like the API isn't even responding... As I am now getting 
undefined is not an object (evaluating 'currentPost.title')
Ooo I have some old service worker stuff apparently...
Just noticed the source is "Service Worker" 😬
Yup that is what was causing it... Just verified in incognito and removed cache and what not for localhost

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?