Firebase 不在 useCollectionData 中返回 ID答案

【问题标题】：Firebase not returning ID in useCollectionDataFirebase 不在 useCollectionData 中返回 ID
【发布时间】：2022-11-24 02:50:32
【问题描述】：

我正在尝试制作一个简单的 firebase 待办事项应用程序。我可以写待办事项，没问题。但是，当我尝试删除待办事项或将其标记为完成时，id 似乎是undefined，并且 firebase 无法找到有问题的待办事项。我该如何纠正这个问题？对于上下文，我正在学习本教程：https://www.youtube.com/watch?v=cuvP4h6O2x8&t=755s

代码：

import "../App.css";
import {useState} from "react";
import {auth, firestore} from "../firebase";
import firebase from "../firebase";
import {useCollectionData} from "react-firebase-hooks/firestore";

const Todos = () => {
  const [todo, setTodo] = useState("");
  const todosRef = firestore.collection(`users/${auth.currentUser.uid}/todos`);
  const [todos] = useCollectionData(todosRef, { idField: "id" });
  const signOut = () => auth.signOut();

  const onSubmitTodo = (event) => {
    event.preventDefault();
    setTodo("");
    todosRef.add({
      text: todo,
      complete: false,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
    });
  };

  return (
    <>
      <header>
        <button onClick = {signOut}>Sign Out</button>
      </header>
      <main>
        <form onSubmit = {onSubmitTodo}>
          <input
            required
            value = {todo}
            onChange = {(e) => setTodo(e.target.value)}
            placeholder="what's next?"
            />
            <button type="submit"> Add </button>
        </form>
        {todos && todos.map((todo)=> <Todo key={todo.id} {...todo} />)}
      </main>
    </>
  );
};


const Todo = ({ id, complete, text}) => {
  const todosRef = firestore.collection(`users/${auth.currentUser.uid}/todos`);
  const onCompleteTodo = (id, complete) =>
    todosRef.doc(id).set({ complete: !complete }, { merge: true });

  const onDeleteTodo = (id) => todosRef.doc(id).delete();

  return (
    <div key={id} className="todo">
      <button
        className={`todo-item ${complete ? "complete" : ""}`}
        tabIndex="0"
        onClick={()=> onCompleteTodo(id, complete)}
        >
          {text}
        </button>
        <button onClick={() => onDeleteTodo(id)}>x</button>
    </div>
  );
};

export default Todos;

【问题讨论】：

你已经做了什么来解决这个问题？您正在使用图书馆，您是否已经检查过useCollectionData文档？
我的第一步是查看文档。我还将我的文件与教程中的代码进行了比较（那里没有找到）。使用控制台日志注销 Todo 函数中的 id 值返回未定义。

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

反应 Firebase 挂钩 v5火柴火力地堡 9及以上，您应该在其中使用FirestoreDataConverter接口。

请参阅documentation。

这些示例使用 TypeScript，但在您的情况下，这样的事情应该可以工作，在获取集合后立即应用 withConverter 和您的自定义转换器：

const converter = {
    toFirestore(post) {
        return {
            text: post.text,
        }
    },
    fromFirestore(snapshot, options) {
        const data = snapshot.data(options)
        return {
            id: snapshot.id,
            text: data.text,
        }
    },
}

const todosRef = firestore
    .collection(`users/${auth.currentUser.uid}/todos`)
    .withConverter(converter);

【讨论】：

【解决方案2】：

使用以下代码转到规则和类型编辑；

 allow read, write: if request.time>timestamp.date(2022, 11, 23);

【讨论】：