为什么项目不显示在我的网站上？我做错了什么家伙？有人能帮助我或告诉我如何解决这个问题的代码块（index.js）

import { client } from '../lib/client';
import {HeroBanner,FooterBanner, Product} from '../components';
const Home = ({ products, bannerData}) => (
  <div>
    <HeroBanner heroBanner ={bannerData.length && bannerData[0]} />
    <div className="products-heading">
      <h2>Best Selling Product</h2>
      <p>Speakers of many variations</p>
    </div>
    
    <div className="products-container">
    {products?.map((product) =><Product key={product.id} product={product.name}/>)}
    </div>

    <FooterBanner footerBanner={bannerData && bannerData[0]}/>
  </div>
);

export const getServerSideProps = async () =>{
  const query = '*[_type == "product"]';
  const product = await client.fetch(query);

  const bannerQuery = '*[_type == "banner"]';
  const bannerData = await client.fetch(bannerQuery);

  return{
    props: {product, bannerData }
  }
}

export default Home;```