解决Next.js 13中useEffect因依赖项引发的无限循环问题

核心问题 #

1. useEffect无限循环：你把galleries放进了useEffect的依赖数组，每次调用setGalleries更新状态，都会触发useEffect重新执行，进而再次拉取数据、更新状态，形成无限循环，这就是你看到useEffect持续运行的原因。
2. 数据无法自动同步：使用getDocs是一次性拉取Firestore集合数据，组件挂载后只会获取一次，增删操作导致Firebase数据变化时，组件无法感知，所以移除galleries依赖后，组件不会重新渲染更新内容。

解决方案 #

1. 修复循环+实现实时数据同步 #

改用Firestore的onSnapshot方法替代getDocs，它能实时监听集合的新增、删除、修改变化，自动触发回调更新组件状态，同时把useEffect的依赖数组设为空，避免循环：

const [galleries, setGalleries] = useState<any[]>([]);

useEffect(() => {
  const collectionRef = collection(db, "galleries");
  // 监听集合实时变化
  const unsubscribe = onSnapshot(collectionRef, (querySnapshot) => {
    const documents = querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));
    setGalleries(documents);
  });

  // 组件卸载时取消监听，防止内存泄漏
  return () => unsubscribe();
}, []); // 空依赖数组，仅组件挂载时执行一次

2. 增删功能适配 #

只要CreateGalleryComponent和GalleryItem里的增删操作是直接操作Firestore的galleries集合，onSnapshot会自动捕获这些变化，更新galleries状态，组件会自动重新渲染展示最新数据，不需要额外手动触发数据获取。

补充说明 #

问题和增删功能的分离无关，核心是useEffect依赖配置错误，加上没有使用Firestore的实时监听机制，导致数据更新和组件渲染的逻辑冲突。

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