React应用中Firestore客户端未用Websocket，频繁发起POST请求问题

1. 大量POST请求的原因与是否需要担忧 #

首先，你的代码存在一个关键问题：useEffect没有设置依赖数组，这会导致组件每次渲染（包括调用setDogs更新状态后）都重复执行订阅逻辑——先取消旧订阅，再创建新订阅，直接引发了频繁的POST请求，这是当前问题的核心，优先解决这个！

修改useEffect，添加空依赖数组确保仅在组件挂载时订阅一次：

useEffect(() => {
    const unSubscribe = onSnapshot(dogsCol, dogsSnap => {
        const dogsArray = dogsSnap.docs.map(dogSnap => {
            const dog = dogSnap.data() as Dog;
            dog.id = dogSnap.id;
            return dog;
        });
        setDogs(dogsArray);
    });

    return () => unSubscribe();
}, []); // 添加空数组，仅执行一次订阅

关于Firestore的请求机制：Firestore默认优先用WebSocket维持实时连接，若WebSocket连接失败会自动降级为长轮询（即你看到的POST请求）。长轮询是官方的 fallback 机制，不会额外产生费用——Firestore按文档读取次数和实时监听连接数计费，而非HTTP请求次数。但长轮询效率低于WebSocket，建议后续排查WebSocket连接问题。

2. 强制Firestore使用WebSocket（TypeScript兼容） #

旧的Firebase.INTERNAL.forceWebSockets()在V9模块化SDK中已废弃，现在可以通过初始化Firestore时配置参数强制启用WebSocket：

修改你的Firestore配置代码，在getFirestore中传入experimentalForceWebSockets参数（该参数为实验性，但在绝大多数环境下可正常使用）：

const firestore = getFirestore(app, {
  experimentalForceWebSockets: true
});

若TypeScript提示类型错误，可通过类型断言或升级firebase包到最新稳定版解决：

import { FirestoreSettings } from "firebase/firestore";

const firestoreSettings: FirestoreSettings = {
  experimentalForceWebSockets: true
} as FirestoreSettings;

export const firestore = getFirestore(app, firestoreSettings);

另外，可在浏览器控制台执行new WebSocket('wss://echo.websocket.org')测试当前环境是否支持WebSocket，排除网络或浏览器限制问题。

内容的提问来源于stack exchange，提问作者Kragh