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

Question

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,
        };
      }

Answer 1

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