如何使用react中的map打印JSON数据

firebase中的数据

ref = db.reference('/home1')
ref.set({
'slider':
[ 
  {"id" : "1" ,"name":"first","url":"images/gateaux/2D3A3227.jpg"},
  {"id" : "2" ,"name":"second","url":"images/gateaux/pas/2D3A3470.jpg"},
  {"id" : "3" ,"name":"third","url":"images/anniv/deux/2D3A3497.jpg"},
  {"id" : "4" ,"name":"four","url":"images/anniv/2D3A3106.jpg"},
  {"id" : "5" ,"name":"five","url":"images/anniv/2D3A3365.jpg"},
  {"id" : "6" ,"name":"six","url":"images/gateaux/2D3A5245.jpg"}
]
})

我的代码在react中,我试图从firebase打印数据,当我只打印“product”时,我会收到所有数据,当打印“product.id”时,会收到滑块,当我打印“product.name”时,收到未定义的名称,我想收到与url相同的“first”名称。我需要帮助

export default function Patiss() {
const [home1, sethome1] = useState([]);
useEffect(()=>{
  const usersRef = ref(database,'home1')
  get(usersRef).then((snapshot) => {
    if(snapshot.exists()){
      const userArray = Object.entries(snapshot.val()).map(([id,data])=>({
         id,
        ...data,
      }));
      sethome1(userArray);
     // console.log(userArray)
    }else{
      console.log('no data available');
    }
}).catch((error)=>{
  console.error(error);
});
},[]);
const navigate = useNavigate()
const Keti = () =>{
  navigate("/")
}
return (
  // <div >
    <div className=" mx-auto max-w-2xl px-4 py-2  ">
      <div className="mt-10 grid grid-cols-1">
      {/* {home1.length > 0 && home1.map((product, index) => { */}
      {home1.map((product, index) => {
          //  console.log(`${product.name}`); // Should now log the name correctly
           console.log(product); 
           console.log(product.id); 
           console.log(product.name); 
              return (
                <div key={index} className="productDisplay"
                  onClick={() => {
                    navigate(`/home1/${product.id}`);
                  }}
                >
            </div>
        );
        })}
      </div>
    </div>
)}

console.log(product) -> all the data print, json
console.log(product.id) -> slider 
console.log(product.name) -> undefined