如何从Firestore取数初始化React State并避免无限循环？

为什么直接写会触发无限循环？ #

你把请求和setState逻辑直接放在组件渲染代码里，每次组件渲染都会执行这段代码。而setDataIn会触发组件重渲染，又因为React的setState是异步操作，下一次渲染时dataIn还是初始的空数组，导致逻辑再次执行请求和setDataIn，形成无限循环。

正确实现：用useEffect+空数组依赖 #

把数据获取逻辑放到useEffect中，给useEffect添加空数组依赖，确保组件挂载时只执行一次，既能避免无限循环，又能正确更新State。

完整代码示例 #

先在组件外部初始化Firebase（避免每次渲染重复创建实例）：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换成你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

组件内部代码：

import { useState, useEffect } from "react";
import { getDocs, collection } from "firebase/firestore";

// 假设你的skillData类型定义
type skillData = {
  name: string;
  level: number;
  // 其他字段...
};

const YourComponent = () => {
  const [dataIn, setDataIn] = useState<skillData[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 内部定义异步函数，useEffect回调不能直接用async
    const fetchSkillsData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, "MainWebsiteSkillsData"));
        // 用map转换数据，比forEach更简洁高效
        const tempData = querySnapshot.docs.map(doc => ({
          ...doc.data() as skillData,
          key: doc.id
        }));
        setDataIn(tempData);
      } catch (err) {
        // 捕获错误，方便调试和提示用户
        setError(err instanceof Error ? err.message : "获取技能数据失败");
      } finally {
        setLoading(false);
      }
    };

    fetchSkillsData();
  }, []); // 空数组依赖：仅组件挂载时执行一次

  // 渲染逻辑
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div>
      {dataIn.map(item => (
        <div key={item.key}>{item.name}</div>
      ))}
    </div>
  );
};

export default YourComponent;

为什么你之前用useEffect无法更新State？ #

大概率是这几个原因：

1. useEffect回调直接用了async：React不允许useEffect的回调是async函数（因为会返回Promise，而React期望回调返回清理函数或undefined），必须在内部定义async函数再调用。
2. 依赖项设置错误：如果没加空数组依赖，每次重渲染都会执行；如果加了错误的依赖，可能导致闭包捕获旧的State值，或者重复执行逻辑。
3. 未处理请求错误：比如Firestore权限不足、网络问题导致请求失败，你没加catch块，setDataIn根本没执行，看起来像是State没更新。
4. Firebase初始化重复：如果每次渲染都重新初始化firebaseApp和db，可能导致请求异常，无法获取数据。

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