无法向 Firebase 数据库添加数据

Question

我正在尝试将“Image”、“Name”、“Price”等数据添加到我的 Firebase 数据库。我的 addDoc 似乎不起作用，而且我没有收到任何错误。这是我的数据库的样子（第一个值是手动添加的）

我也更改了权限

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
 match /{document=**} {
  allow read, write: if true;
    }
  }
}

这是我的代码：

   import React, { useState, useEffect } from 'react';
   import { db, storage } from './../../config/config';
   import { ref, uploadBytes } from 'firebase/storage';
   import { getDocs, collection, setDoc } from 'firebase/firestore';
   import { ItemsList, AddForm } from './shopStyle'
   import { set } from "firebase/database";;
   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(null);


   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();
  }, []);

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

if(newItemImage == null) return;
const imageRef = ref(storage,`items/${newItemImage.Name + v4()}`);
uploadBytes(imageRef, newItemImage).then(() =>{
  alert("image uploaded");
}).catch((error) => {
  console.log(error);
})

/* set(ref(itemsRef, 'items/' ), {
  Image: newItemImage,
    Name: newItemName,
    Price: newItemPrice
}); */
try {
  await setDoc(itemsRef, {
    Image: newItemImage,
    Name: newItemName,
    Price: newItemPrice,
  });

  // 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={(e) => setNewItemImage(e.target.files[0])}
    />
    <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>
 );
};

我尝试了不涉及“addDoc”的不同方法来添加到数据库，但似乎它们都不起作用。我究竟做错了什么？谢谢！

Answer 1

使用

setDoc

时，您应该使用

doc()

在 Firestore 中创建文档引用。检查下面的代码。

import { getDocs, doc, setDoc } from 'firebase/firestore';

//...

const itemsRef = doc(db, "items");

await setDoc(itemsRef, {
    Image: newItemImage,
    Name: newItemName,
    Price: newItemPrice,
  },{merge:true});

查看文档以获取更多信息。