Firebase v.9 deleteDoc( ) 不执行任何操作,也不会捕获任何错误

Firebase v.9 deleteDoc( ) doesn't do anything nor catches any error

我是 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 至 UserIdentity.jsx

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

UserIdentity.jsx 到 YourCard.jsx

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

我认为你没有正确处理道具

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

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

child

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

终于发现问题出在addDoc(),它添加了yc2类型的新文档,而deleteDoc()搜索了mc2类型的文档。将添加方法更改为 setDoc() 修复它。