我是sanity的新手，我试图复制一个教程，但是当我从sanity返回数据时，当我控制台记录我试图从sanity获取的元素时，它只显示undefined。这是我的页面代码。

export default function Home({products,bannerData}) {
  return (
    <div>
    <HeroBanner herobanner={bannerData.lenght && bannerData[0]}/>
    <div className="products-heading">
      <h2>Best Seller Products</h2>
      <p>speaker There are many variations passages</p>
    </div>

    <div className="products-container">
      {products?.map((product) => <Product key={product._id} product={product} />)}
    </div>

    <FooterBanner/>
  </div>
  )
  
};

export async function getStaticProps(){
  const products = await client.fetch('*[_type == "product"]');
  const bannerData = await client.fetch('*[_type == "banner"]');
  return { props: { products, bannerData } };
};

当我通过SanityStudio中的Vision选项卡运行查询时，它会在那里返回数据。我已经在nextjs中成功地设置了客户端，这是我的设置;

import imageUrlBuilder from '@sanity/image-url';

export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
export const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION // "2023-05-06"
export const token = process.env.SANITY_SECRET_TOKEN

export const client = createClient({projectId, dataset, apiVersion, token, useCdn: true})

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

我真的不知道为什么它返回undefined，我会感谢任何帮助！