0

TypeError: Cannot destructure property 'siteSettingsData' of 'data' as it is undefined.

Give this error when I'm going to pass data from a component but work fine on index page

 import React from 'react'
    import client from '../lib/sanity';
    
    
    export default function Home({ data }) {
        const { siteSettingsData } = data;
      
        return (
          <>
    
            <h1 className="site-header__logo">{siteSettingsData.title}</h1>
    
          </>
        );
      }
      
      const siteSettingsQuery = `*[_type == "siteSettings"][0] {
        title,
        repoURL {
          current
        }
      }`;
      
      export async function getStaticProps() {
        const siteSettingsData = await client.fetch(siteSettingsQuery);
      
        const data = { siteSettingsData };
      
        return {
          props: {
            data,
          },
          revalidate: 1,
        };
      }
raqibnur
  • 59
  • 1
  • 7

1 Answers1

0

Things you can do to solve the problem:

  1. console.log(data) to see what you are receiving
  2. Go to the file that is passing props to Home, to see whether data key has been added. If it has, it should also include the siteSettingsData key within the data object.

More about props on the React website: https://reactjs.org/docs/components-and-props.html

  • data is coming when I'm trying from the index.js – raqibnur Mar 03 '22 at 11:28
  • @raqibnur, if you're still stuck, I can have a look at the repository. Is `data` an `object`? Do you need to `await` the `data`, before destructuring it? Maybe it's loaded after. –  Mar 03 '22 at 15:50