如何从子集合中获取所有项目 Firebase Firestore Vue

Question

如何从子集合中获取所有评论？

这是我的可重用函数，用于获取评论集合。

    import { ref, watchEffect } from 'vue';
    import { projectFirestore } from '../firebase/config';

    const getCollection = (collection, id, subcollection) => {
    const comments = ref(null);
    const error = ref(null);

    // register the firestore collection reference
     let collectionRef = projectFirestore
    .collection(collection)
    .doc(id)
    .collection(subcollection);

    const unsub = collectionRef.onSnapshot(
    snap => {
      let results = [];
      snap.docs.forEach(doc => {
        doc.data().createdAt && results.push(doc.data());
      });

      // update values
      comments.value = results;
      error.value = null;
    },
    err => {
      console.log(err.message);
      comments.value = null;
      error.value = 'could not fetch the data';
    }
    );

    watchEffect(onInvalidate => {
      onInvalidate(() => unsub());
    });

       return { error, comments };
    };

    export default getCollection;

这是我的 Comments.vue 我在 setup() 函数中传递参数（组合 API）

const { comments } = getAllComments('posts', props.id, 'comments');

当我 console.log(comments) 它为空时，在快照 doc.data() 中是好的，但不知何故结果也是空数组，即使我将 doc.data() 推到结果数组并将其传递给 comments.value.

有人可以帮助我如何获得该子集吗？

这是我的 Comment.vue 组件

   export default {
    props: ['id'],
   setup(props) {
const { user } = getUser();
const content = ref('');

const { comments } = getAllComments('posts', props.id, 'comments');

const ownership = computed(() => {
  return (
    comments.value && user.value && user.value.uid == comments.value.userId
  );
});

console.log(comments.value);
}

return { user, content, handleComment, comments, ownership };

}, };

Answer 1

const getCollection = (collection, id, subcollection) => {
  const comments = ref(null);
  const error = ref(null);

  // Firestore listener

  return { error, comments };
}

此处 comments 的初始值为 null，由于 Firebase 操作是异步的，因此加载数据可能需要一段时间，因此它会记录 null。如果您在 v-for 中使用 comments 那么这可能会引发错误。

最好将初始值设置为空数组，这样在加载数据时就不会抛出任何错误：

const comments = ref([]);

此外，如果您只获取一次，请使用 .get() 而不是 onSnapshot()

如何从子集合中获取所有项目 Firebase Firestore Vue

How to get all items from subcollection Firebase Firestore Vue

firebase

vue.js

google-cloud-firestore

vue-composition-api