Firestore Web v9 查询指定ID数组文档及forEach异步调用问题

问题点 #

• ID查询逻辑错误：where('id', 'in', songUids)匹配的是文档内名为id的字段，而非文档自身的唯一ID。查询指定文档ID的文档时，必须使用Firestore内置的documentId()作为查询字段。此外in操作符单次最多支持传入10个匹配值，传入ID数量超过10时需要拆分数组分批查询。
• 异步执行逻辑错误：forEach不会等待内部async回调执行，现有代码会在所有歌曲查询请求完成前就返回albumsData，此时专辑的albumSongs字段均为未resolve的Promise，返回数据不完整。同时setIsLoadingAlbums(false)调用时机过早，歌曲资源未加载完成就关闭加载状态，会导致页面渲染异常。
• 拼写错误：字段名ablumId拼写错误，正确写法为albumId。

修正实现 #

首先从Firestore SDK导入所需方法：

import { getDocs, collection, query, where, documentId } from "firebase/firestore";

修正getAlbumSongs方法，兼容超过10个ID的查询场景：

const getAlbumSongs = async (songUids) => {
  if (!songUids?.length) return [];
  const albumSongs = [];
  const batchSize = 10;
  // 拆分ID数组分批查询，适配in操作符的数量限制
  for (let i = 0; i < songUids.length; i += batchSize) {
    const batch = songUids.slice(i, i + batchSize);
    const q = query(
      collection(db, 'songs'),
      where(documentId(), 'in', batch)
    );
    const snap = await getDocs(q);
    snap.forEach(doc => {
      const { album_id, author_id, song_title, file_path } = doc.data();
      albumSongs.push({
        songId: doc.id,
        albumId: album_id,
        authorId: author_id,
        songTitle: song_title,
        filePath: file_path,
      });
    });
  }
  return albumSongs;
};

修正getAlbums方法，使用Promise.all配合map处理异步请求，调整加载状态触发时机：

async function getAlbums() {
  setIsLoadingAlbums(true);
  try {
    const snap = await getDocs(collection(db, 'albums'));
    // 等待所有关联歌曲查询完成后再组装数据
    const albumsData = await Promise.all(
      snap.docs.map(async (doc) => {
        const { album_title, cover_url, song_uids } = doc.data();
        return {
          albumId: doc.id,
          albumTitle: album_title,
          albumCoverUrl: cover_url || 'https://picsum.photos/300',
          albumSongs: await getAlbumSongs(song_uids),
        };
      })
    );
    console.log('albumsData', albumsData);
    return albumsData;
  } catch (err) {
    console.error("专辑数据加载失败", err);
    return [];
  } finally {
    // 无论请求成功失败，所有流程结束后再关闭加载状态
    setIsLoadingAlbums(false);
  }
}

优化建议 #

• 如果songs集合数据量较小，可以一次性拉取全量歌曲数据后在本地做关联匹配，减少网络请求次数。
• 传入getAlbumSongs的ID数组建议先做去重处理，避免重复查询浪费资源。

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