如何让useEffect在rooms数据更新时自动重新执行，避免无限渲染？

你当前的问题来自两个核心原因：

1. 你用的getDocs是Firestore的一次性数据拉取接口，只会在调用时拉取一次当前的集合数据，不会监听后续的数据变更。
2. 你把rooms加入useEffect依赖会无限循环，是因为useEffect内部调用setRooms会修改rooms状态，进而触发useEffect重新执行，形成「拉取数据→更新rooms→触发拉取」的死循环。

这里提供两种适配不同场景的解决方案：

方案1：使用Firestore实时监听器（推荐，适合聊天类需要多端同步的场景） #

直接用onSnapshot替代getDocs，当集合数据发生变更时会自动触发回调更新本地状态，不需要手动拉取，也不会出现循环问题：

const [rooms, setRooms] = useState([]);

useEffect(() => {
  // 建立实时监听，返回取消订阅的函数
  const unsub = onSnapshot(collection(db, "rooms"), (querySnapshot) => {
    const data = querySnapshot.docs.map((doc) => ({
      id: doc.id,
      data: doc.data(),
    }));
    setRooms(data);
    console.log("数据更新");
  });

  // 组件卸载时取消监听，避免内存泄漏
  return () => unsub();
}, []);

用这个方案之后，不管是当前用户还是其他用户新增房间，本地都会自动同步最新的房间列表。

方案2：新增房间成功后手动触发拉取（适合不需要实时同步的场景） #

如果不需要监听其他用户的变更，只需要当前用户新增房间后刷新列表，可以在addDoc执行成功后调用一次getRoomsData，不需要修改原有的useEffect逻辑：

const addRoom = async () => {
  const roomName = prompt("please enter name for chat room");

  if (roomName) {
    // 等待addDoc执行完成后再拉取最新数据
    await addDoc(collection(db, "rooms"), {
      name: roomName,
    });
    // 手动触发数据刷新
    getRoomsData();
  }
};

这个方案的好处是不需要维持长连接，资源消耗更低，适合对实时性要求不高的场景。

内容的提问来源于stack exchange，提问作者jethro-dev