Firestore查询collection无法获取全部文档，仅返回最后两条是什么原因？

• 核心原因：闭包捕获旧状态导致更新覆盖
  你定义的fetchRecipes函数在组件首次渲染时生成，内部捕获的recipedata永远是初始的空数组[]。在forEach循环中每次调用setRecipeData([...recipedata, item.data()])时，展开的都是初始空数组，相当于每次都给状态赋值为仅包含当前遍历到的单条文档数据。结合React的异步批量更新策略，最终只会生效最后1-2次的更新结果，就出现了仅返回最后两条文档的现象。
• 次要排查方向：可先确认Firestore的recipes集合是否自行设置了查询限制、或是权限规则仅允许读取部分文档，不过从现有代码逻辑来看，90%以上的问题是第一个原因导致的。

修复方案1：函数式状态更新（快速修复） #

将循环内的状态更新改为接收前序状态的函数写法，不依赖闭包捕获的旧状态：

const [recipedata, setRecipeData] = useState([]);
  
const fetchRecipes = async () =>{
    const response = fire.firestore().collection("recipes");
    const data = await response.get();
    data.docs.forEach(item=>{
        // 函数式更新每次取最新的前序状态拼接
        setRecipeData(prev => [...prev, item.data()])     
    })
}
useEffect(() => {
   fetchRecipes();
}, [])

修复方案2：批量处理后一次性更新（性能更优） #

无需循环调用状态更新，先整理所有数据为完整数组后再赋值，减少不必要的组件重渲染：

const [recipedata, setRecipeData] = useState([]);
  
const fetchRecipes = async () =>{
    const response = fire.firestore().collection("recipes");
    const data = await response.get();
    // 统一处理所有文档数据
    const allRecipes = data.docs.map(item => item.data());
    // 一次性更新状态
    setRecipeData(allRecipes);
}
useEffect(() => {
   fetchRecipes();
}, [])

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