未捕獲的FirebaseError：查詢無效。您不能在呼叫orderBy()之前呼叫startAt()或startAfter()

我正在嘗試添加功能以獲取接下來的 4 條評論，但是當我單擊Load more comments按鈕時，它會拋出此錯誤訊息。

未捕獲的 FirebaseError：查詢無效。在呼叫 orderBy() 之前，您不能呼叫 startAt() 或 startAfter()。

任何人，請幫我解決這個問題。

解決方案評論.js

import React, { useState } from "react"
import { useParams } from "react-router-dom"

import { useCollection } from "../../hooks/useCollection"

import Comment from "./Comment"
import CommentForm from "./CommentForm"

const SolutionComments = () => {
  const [activeComment, setActiveComment] = useState(null)
  const { id } = useParams()
  const { documents, fetchMore } = useCollection(`solutions/${id}/comments`, null, 4, [
    "createdAt",
    "desc",
  ])

  const fetchMoreComments = () => {
    fetchMore(documents[documents.length - 1])
  }

  return (
    <div className="mt-10">
      <CommentForm docID={id} />
      <div>
        {documents &&
          documents.map((comment) => (
            <Comment
              key={comment.id}
              comment={comment}
              replies={comment.replies}
              activeComment={activeComment}
              setActiveComment={setActiveComment}
            />
          ))}
      </div>
      <button onClick={fetchMoreComments} className="text-white bg-purple-500">
        Load More Comments!
      </button>
    </div>
  )
}

export default SolutionComments

useCollection 鉤子：

import { useEffect, useRef, useState } from "react"
// firebase import
import {
  collection,
  limit,
  onSnapshot,
  orderBy,
  query,
  startAfter,
  where,
} from "firebase/firestore"

import { db } from "../firebase/config"

export const useCollection = (c, _q, _l, _o) => {
  const [documents, setDocuments] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)

  // if we don't use a ref --> infinite loop in useEffect
  // _query is an array and is "different" on every function call
  const q = useRef(_q).current
  const o = useRef(_o).current
  let ref = collection(db, c)

  useEffect(() => {
    if (q) {
      ref = query(ref, where(...q))
    }
    if (o) {
      ref = query(ref, orderBy(...o))
    }
    if (_l) {
      ref = query(ref, limit(_l))
    }

    const unsubscribe = onSnapshot(ref, (snapshot) => {
      const results = []
      snapshot.docs.forEach(
        (doc) => {
          results.push({ ...doc.data(), id: doc.id })
        },
        (error) => {
          console.log(error)
          setError("could not fetch the data")
        }
      )
      // update state
      setDocuments(results)
      setIsLoading(false)
      setError(null)
    })

    // unsubscribe on unmount
    return unsubscribe
  }, [c, q, _l, o, isLoading])

  // I'm using this function to fetch next 4 comments including the previous ones.
  const fetchMore = (doc) => {
    ref = query(ref, orderBy(...o), startAfter(doc), limit(_l))
    onSnapshot(ref, (snapshot) => {
      const results = []
      snapshot.docs.forEach(
        (doc) => {
          results.push({ ...doc.data(), id: doc.id })
        },
        (error) => {
          console.log(error)
          setError("could not fetch the data")
        }
      )
      // update state
      console.log(results)
      setDocuments([...documents, results])
      setIsLoading(false)
      setError(null)
    })
  }

  return { documents, fetchMore, error, isLoading }
}

uj5u.com熱心網友回復：

您正在使用onSnapshot()開始您的查詢。由于您正在進行分頁，因此您可能希望使用它getDocs()。

至少，您要確保onSnapshot()在開始新的偵聽器之前關閉以前的偵聽器。但是使用onSnapshot()with 分頁很少有用/正確。在這種方法下，事情變得非常復雜。

標籤：javascript 反应 火力基地 谷歌云火库

上一篇：當我使用顫振在iOS上開發時，無法收到來自firebase的通知

下一篇：當我使用recylceviewTextView從firebase中檢索孩子時，不會顯示