为什么将Firestore返回的文档数据设置为React state后二者值不一致？

AI 小北

2026-9-29

差异原因

React 中 useState 返回的状态更新函数 setSongs 是异步批量执行的，调用 setSongs 后不会立刻修改当前渲染闭包中的 songs 变量，只会在组件触发下一次重新渲染时，才会返回更新后的状态值。
你调用 useState 时没有传入初始值，当前这次 getSongs 函数执行上下文中的 songs 始终是初始的 undefined，因此第二个打印结果和实际拿到的 songList 不一致。

解决方法

1. 正确验证状态更新结果

如果要确认 songs 的更新结果，可以在组件渲染作用域打印，或者通过 useEffect 监听 songs 的变化：

// 传入空数组作为初始值，避免后续调用数组方法时报错
const [songs, setSongs] = useState([]);

async function getSongs() {
  // 重命名变量，避免和外层状态变量songs冲突
  const songsCol = collection(db, 'songs');
  const songSnapshot = await getDocs(songsCol);
  const songList = songSnapshot.docs.map(doc => doc.data());
  setSongs(songList);
  console.log(songList);
};

// 监听songs变化，状态更新完成后会触发打印
useEffect(() => {
  console.log('更新后的songs值：', songs);
}, [songs]);