Reactjs Firebase Storage： 对象不存在图片上传路径错误

每次我try 到云上的 firebase 基地add和image时，我都会得到一个错误.

FirebaseError: Firebase Storage: Object 'items/Screenshot at May 22 07-33-37.png9573dc82-ec43-4789-88ec-e93727d6a11f' does not exist. (storage/object-not-found)

问题是，它被成功上传到存储上的图像，但无论出于什么原因，它都找不到，也没有被添加到云中.

我该怎么办？

这是我的代码:

import React, { useState, useEffect } from 'react';
import { db, storage } from './../../config/config';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { getDocs, collection, addDoc } from 'firebase/firestore';
import { ItemsList, AddForm } from './shopStyle';
import { v4 } from 'uuid';

export const Shop = () => {
const [items, setItems] = useState([]);
const itemsRef = collection(db, "items");

 // New item states
const [newItemName, setNewItemName] = useState("");
const [newItemPrice, setNewItemPrice] = useState(0);
const [newItemImage, setNewItemImage] = useState("");

  useEffect(() => {
    const fetchData = async () => {
    try {
    const data = await getDocs(itemsRef);
    const filteredData = data.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id,
    }));
    setItems(filteredData);
  } catch (err) {
    console.error(err);
  }
};
fetchData();
 }, []);

  function handleImage(e) {
e.preventDefault();
let pickedFile;
if (e.target.files && e.target.files.length > 0) {
  pickedFile = e.target.files[0];
  setNewItemImage(pickedFile);
  console.log(pickedFile);
}
}

 const addItems = async (e) => {
e.preventDefault(); // Prevent form submission

if (newItemImage == null) return;

const imageRef = ref(storage, `gs://cart-app-b469e.appspot.com/items/${newItemImage.name + v4()}`);
uploadBytes(imageRef, newItemImage).then(() => {
  alert("Image uploaded");
}).catch((error) => {
  console.log(error);
});

try {
  const downloadURL = await getDownloadURL(imageRef);

  const newItem = {
    Image: downloadURL,
    Name: newItemName,
    Price: newItemPrice,
  };

  await addDoc(itemsRef, newItem);

  // Clear input fields after successful addition
  setNewItemImage("");
  setNewItemName("");
  setNewItemPrice(0);
} catch (err) {
  console.log(err);
}
};  

  return (
<div>
  <AddForm onSubmit={addItems}>
    <input
      accept="image/*"
      id="icon-button-file"
      type="file"
      onChange={handleImage}
    />
    <input
      type="text"
      placeholder="name"
      value={newItemName}
      onChange={(e) => setNewItemName(e.target.value)}
    />
    <input
      type="number"
      placeholder="price"
      value={newItemPrice}
      onChange={(e) => setNewItemPrice(e.target.value)}
    />
    <button onClick={addItems}>Add</button>
  </AddForm>
  <ItemsList>
    {items.map((item) => (
      <div key={item.id}>
        <img src={item.Image} alt={item.Name} />
        <h1>{item.Name}</h1>
        <h4>{item.Price}</h4>
      </div>
    ))}
  </ItemsList>
</div>
);
};

我似乎不知道怎么才能走对这条路……