我正在执行一个firebase查询，以便在一个属于特定项目的bug跟踪应用程序中获得门票。当我加载使用此查询的页面时，数据有时会加载数据，有时会加载数据失败，并显示以下错误消息:
@firebase/firestore: firestore (9.6.10): Connection WebChannel传输错误
后面跟着一个400 POST错误(也很奇怪，因为我没有向数据库添加数据):
fetchxmlhttpfactory.js: 270 帖子https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fbugtracker-ad036%2Fdatabases%2F(默认),版本= 8,gsessionid = WLlKfoxUAL-Qxt242-wHXlDzxIsUI23lt1Wynf2GhDs& SID = AD8kKCDnuwmxndB_gE1gag&消除= 80048,援助= 161539,zx = qnwq3itw57jk& t = 1400
而且，即使这个查询成功工作并且数据显示在屏幕上，与其他查询相比，这个过程花费了异常长的时间(大约8-10秒)。
这是我正在使用的特定查询和快照:
useEffect(() => {
const ticketRef = collection(db, "tickets")
const ticketQuery = query(ticketRef, orderBy("timeStamp", "desc"), where("projectId", "==", projectId), limit(5))
const unsub = onSnapshot(ticketQuery, (snapshot) =>
setTickets(snapshot.docs.map((doc) => ({ ...doc.data(), id:doc.id })))
); return unsub; });
由于我一直在阅读问题可能与应用程序如何缓存数据有关，我还将包括配置文件，以防有帮助:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
databaseURL: 'https://bugtracker-ad036.firebaseio.com',
apiKey: process.env.REACT_APP_FIREBASE_KEY,
authDomain: "bugtracker-ad036.firebaseapp.com",
projectId: "bugtracker-ad036",
storageBucket: "XXXXXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXXXXXXXXX",
appId: "1:XXXXXXXXXX:web:XXXXXXXXXXXXXXXXXXXXSS",
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth()
export const storage = getStorage(app);
对于错误:@firebase/firestore: firestore (9.6.10): Connection WebChannel transport error
你可以参考这个链接:
这里提供的最新解决方案:
import {initializeFirestore} from 'firebase/firestore' const db = initializeFirestore(firebaseApp, {useFetchStreams: false})
对于缓慢的查询性能，您可以参考本博客提到的原因和解决步骤:
对于看似缓慢的查询，最常见的解释可能是你的查询实际上运行得非常快。但是在查询之后完成了，我们还需要把所有的数据传输到你的设备上，这是运行缓慢的部分
如果离线缓存太大:
首先，遵循最佳实践:为查询添加限制，以便只检索您认为用户需要的数据，
并考虑将不需要的详细信息移到子集合中。另外，你也可以在文章的最后讨论"几个子集合vs一个单独的顶层
集合"，这将是一个
关于"几个子集合"结构的好论点，因为缓存只需要搜索这些
集合中的数据。第二，不要在缓存中填充超过你需要的数据。在某些情况下，开发人员会有意地通过查询当他们的应用程序第一次启动时，大量的文件，然后强制所有将来的数据库请求通过本地缓存，通常是为了降低数据库成本，或使将来的方案电话更快。但在实践中，这种做法往往弊大于利好。
第三，考虑减少离线缓存的大小。默认情况下，移动设备上的缓存大小设置为100MB在某些情况下，这可能对您的设备来说是太多的数据处理，特别是如果您最终将大部分数据放在一个中巨大的集合。可以更改此大小cacheSizeBytes值在你的Firebase设置中，那就是您可能希望为某些客户端执行的操作。
第四，尝试完全禁用持久性，看看会发生什么。一般不推荐这种方法——作为离线缓存非常棒。但是如果一个查询看起来很慢，而你不知道为什么，在关闭持久化的情况下重新运行应用会给你如果你的缓存导致了这个问题，这是个好主意。
有关更多信息，您可以参考stackoverflow案例和线程，其中提到了类似的问题。