firebase v.9 deletedoc（）不做任何事情或遇到任何错误

Question

我是React和Firebase的新手，并且我遇到了一个问题，即删除文档功能未被调用并且没有捕获错误。函数deleteitemhandler（）确实运行，但是deletedoc（）却没有。我已经更改了规则，并确保导入是正确的，但它仍然行不通。

deleteitemhandler（），app.jsx

  //? Delete item function
  const deleteItemHandler = async (id) => {
    try {
      await deleteDoc(doc(db, "items", id));
    }
    catch (error) {
      console.log(error);
    }
  }

删除按钮，yourcard.jsx

        <button
          className="btn btn-danger ms-2"
          onClick={() => {
            // console.log(props.name)
            props.deleteItemHandler(props.id)
          }}
        >
          Delete
        </button>

注意更新： 道具通过 app.jsx to userIdentity.jsx

<UserIdentity
        className="userId"
        currentUser={username}
        loginHandler={loginHandler}
        logoutHandler={logoutHandler}
        addListingHandler={addListingHandler}
        //? for YourCard
        itemsFromDB={itemsFromDB}
        deleteItemHandler={deleteItemHandler}
      />

userIdentity.jsx to yourcard.jsx

{yourItems.map((item) => {
                        return (
                          <YourCard
                            // className="YourCard"
                            name={item.name}
                            id={item.id}
                            key={item.id}
                            deleteItemHandler={props.deleteItemHandler}
                          />
                        );
                      })}

Answer 1

最终发现问题在于adddoc（），它添加了yc2键入deletedoc（） 使用搜索文档的新文档。 MC2类型。将添加方法更改为setDoc（）将其修复。

Answer 2

我以为您没有正确处理

 const App = () => {
    const deleteItemHandler = async (id) => {
        await deleteDoc(doc(db, "cities", id));
    }

 return (
     <YourCard deleteItemHandler={deleteItemHandler} id={someId}}
 ) 

道具

  export const YourCard = ({deleteItemHandler, id}) => {
  
  return (
    <button
      className="btn btn-danger ms-2"
      onClick={() => deleteItemHandler(id)}
    >
      Delete
    </button>
  )