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

Question

I am unsure why I have this error. Could you please take a look and advise?

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);
  
    console.log(product);

    return {
      props: { products, product }
    }
}

export default ProductDetails

error - pages/product/[slug].js (6:12) @ ProductDetails TypeError: Cannot destructure property 'image' of 'product' as it is null. 4 | const ProductDetails = ({ product, products }) => { 5 |

6 | const { image, name, details, price } = product; | ^ 7 | return ( 8 | 9 |

Answer 1

I saw this tutorial about sanity, if you get this error when you click on the banner product you have to make sure that you have a Product with the slug name that is the same as your "Product" input in the Banner item.

I don't know if my explanations are clear but when you create a Banner item on Sanity you don't create a Product you have to 'link it'

Answer 2

The answer is shown in the provided error-message:

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

The product that you use as a prop to instantiate ProductDetails is null.

Answer 3

If the above code is an accurate representation which is hard to tell due to the way the question is laid out then the error is in your queries to sanity.

The getStaticProps and getStaticPaths functions are not querying correctly and returning null instead of your products.

I believe this is as you are missing quotes (backticks if using dynamic queries) around the query as below.

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 product = await client.fetch(query)

  const productsQuery = `*[_type == "product"]`
  const products = await client.fetch(productsQuery)

  return {
    props: { products, product }
  }
}