React新手求助：Firebase数据获取后useState初始化报错

核心问题 #

1. 初始渲染数据未就绪：products初始值是空数组，products.find(...)返回undefined，直接解构product.data必然报错。
2. find误用异步回调：find不支持异步回调，你写的async (item) => ...会让product变成Promise对象，而非预期的产品数据。
3. 实时监听导致数据重复：onValue是Firebase的实时监听，每次数据变化都会触发回调，当前写法会不断往products里追加数据，造成数组冗余。

修复步骤 #

1. 处理空状态

在解构product.data前，先判断product是否存在，避免访问undefined的属性。

2. 移除无效异步逻辑

item.key.slice(1)是同步操作，不需要await，直接同步判断即可。

3. 修正数据获取逻辑

如果不需要实时更新，用get替代onValue获取单次数据；如果需要实时监听，每次触发时先清空数组再添加新数据，避免重复。

修复后的完整代码 #

const ProductDetails = () => {
  const [tab, setTab] = useState("desc");
  const [products, setProducts] = useState([]);
  const reviewUser = useRef("");
  const reviewMsg = useRef("");
  const dispatch = useDispatch();
  const [rating, setRating] = useState(null);
  const { id } = useParams();

  // 同步查找，移除不必要的async/await
  const product = products.find(item => item.key.slice(1) === id);

  const fetchProducts = async () => {
    const db = getDatabase();
    const thumbnailRef = ref(db, "Contents/");
    
    // 获取单次数据（无需实时更新时用这个）
    const snapshot = await get(thumbnailRef);
    if (snapshot.exists()) {
      const newProducts = [];
      snapshot.forEach((childSnapshot) => {
        const childData = childSnapshot.val();
        const childKey = childSnapshot.key;
        newProducts.push({ key: childKey, data: childData });
      });
      setProducts(newProducts);
    } else {
      console.log("无可用数据");
    }

    // 如需实时监听，替换成这段代码（避免重复添加）
    // onValue(thumbnailRef, (snapshot) => {
    //   const newProducts = [];
    //   snapshot.forEach((childSnapshot) => {
    //     const childData = childSnapshot.val();
    //     const childKey = childSnapshot.key;
    //     newProducts.push({ key: childKey, data: childData });
    //   });
    //   setProducts(newProducts);
    // });
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  // 数据加载完成前显示加载状态
  if (!product) {
    return <div>加载中...</div>;
  }

  // 此时product已存在，安全解构
  const {
    image: imgUrl,
    title: productName,
    amount: price,
    description,
    shortDesc,
    category,
  } = product.data;

  // 后续组件渲染逻辑
  return (
    // ...你的JSX代码
  );
};

额外优化提示 #

如果只需要当前ID对应的产品，没必要加载所有产品，可直接通过ID构造Firebase路径，单独请求对应数据，提升性能：

// 替换原有的products状态和fetchProducts，改用单个产品状态
const [product, setProduct] = useState(null);

const fetchProduct = async () => {
  const db = getDatabase();
  // 根据你的key格式调整路径，比如key是"_"+id
  const productRef = ref(db, `Contents/_${id}`);
  const snapshot = await get(productRef);
  if (snapshot.exists()) {
    setProduct({ key: snapshot.key, data: snapshot.val() });
  }
};

内容的提问来源于stack exchange，提问作者Gilbert Intabo