TypeError: Cannot destructure property 'image' of 'product' as it is null. Tutorial problem

Question

I am watching a tutorial about Sanity and everything seems fine with the code, but there is something I don't understand. I checked my code for like 6 times and I just don't get it.

Here is my code:

import React from 'react';

import { client, urlFor } from '../../lib/client';

const ProductDetails = ({ product, products }) => {
  const { image, name, details, price } = product;

  return (
    <div>
      <div className="product-detail-container">
        <div>
          <div className="image-container">
            <img src={urlFor(image && image[0])} />
          </div>
        </div>
    </div>
    </div>
  );
};

export const getStaticPaths = async () => {
  const query = `*[_type == "product"] {
    slug {
      current
    }
  }
  `;

  const products = await client.fetch(query);

  const paths = products.map((product) => ({
    params: { 
      slug: product.slug.current
    }
  }));

  return {
    paths,
    fallback: 'blocking'
  }
}

export const getStaticProps = async ({ params: { slug }}) => {
  const query = `*[_type == "product" && slug.current == '${slug}'][0]`;
  const productsQuery = '*[_type == "product"]'
  
  const product = await client.fetch(query);
  const products = await client.fetch(productsQuery);

  return {
    props: { products, product }
  }
}

export default ProductDetails

I tried everything I know, but it doesn't seem to be working

Answer 1

As the error points out, null is being passed as the value of the product prop of the ProductDetails component.

Perhaps this is a transitory state. In that case, you can use the nullish coalescing operator (??) to prevent this error:

const ProductDetails = ({ product, products }) => {
  const { image, name, details, price } = product ?? {}; // <-- changed here

With such operator, when product is null, the destructuring will no longer error, and the variables image, name, etc., will be undefined.