从Firebase获取数据时遭遇ReferenceError: item is not defined错误求助

错误原因 #

你遇到的ReferenceError: item is not defined是因为：

• 组件return里直接使用了item.data，但item仅在getData函数的内部map回调中定义，外部无法访问
• getData函数从未被调用，数据根本没有被获取
• 没有用状态管理获取到的产品数据，无法在组件渲染时使用

修复后的Portfolio组件代码 #

import Image from 'next/image';
import React, { useState, useEffect } from 'react';
import { database } from "../firebaseConfig"
import { collection, getDocs } from "firebase/firestore"
import Product from './Product';

const Portfolio = () => {
  const [products, setProducts] = useState([]);
  const collectionRef = collection(database, 'images')

  const getData = async () => {
    try {
      const response = await getDocs(collectionRef);
      const fetchedProducts = response.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id
      }));
      setProducts(fetchedProducts);
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  }

  useEffect(() => {
    // 组件挂载时调用getData获取数据
    getData();
  }, []);

  return (
    <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:-mt-52 mx-auto ">
      {products.map(({ id, image }) => (
        <Product
          key={id}
          id={id}
          image={image}                
        />
      ))}
    </div>
  );
};

export default Portfolio;

修复后的Product组件代码 #

import React from 'react'
import Image from 'next/image';

function Product({ id, image }) {
  return (
    <div className='max-w-[1240px] mx-auto py-16 text-center'>
      <button>Travel Photos</button>
      <div className='grid grid-rows-none md:grid-cols-5 p-4 gap-4'>
        <div className='w-full h-full col-span-2 md:col-span-3 row-span-2'>
          <Image
            src={image} 
            id='myImage'
            alt='产品图片'
            layout='responsive'
            width='677'
            height='451'
          />
        </div>
      </div>
    </div>
  );
}

export default Product

关键修复点说明 #

• 新增useState定义products状态，用来存储从Firebase获取的产品数据
• 用useEffect在组件挂载时自动调用getData函数，确保数据能被获取
• 将getData改为异步函数，用async/await替代Promise链式调用，代码更清晰
• 渲染时使用状态中的products数组进行map，而不是未定义的item.data
• 移除Product组件中无用的getData导入和product变量，简化代码

内容的提问来源于stack exchange，提问作者Vikrant gupta