Firestore数据加载404错误求助：React Native项目数据展示异常

问题根源分析 #

1. 数据库路径参数错误：控制台报错的请求URL中，database参数包含多余空格（(default )），导致Firestore无法正确识别数据库路径，返回404错误。数据量较小时请求负载小未触发该问题，数据量增大后暴露了配置错误。
2. 低效数据获取逻辑：当前代码全量拉取CATEGORY_CONTENT集合所有数据后在前端过滤，数据量增大时不仅消耗更多带宽、拖慢加载速度，还可能触发Firestore的请求限制。

修复步骤 #

1. 修正Firebase数据库配置

检查你的firebaseConfig.js文件，确保Firestore数据库引用路径中的(default)没有多余空格。正确的数据库路径格式应为：

// firebaseConfig.js示例
export const FIRESTORE_DB = getFirestore(app);
// 手动指定数据库时，路径应为：`projects/[项目ID]/databases/(default)`

去掉(default)后的空格，确保请求URL中的database参数为(default)而非(default )。

2. 替换前端过滤为后端查询

修改CategoryContentScreen中的getSubCategoriesData方法，使用Firestore的where查询在后端完成数据筛选，避免全量拉取：

// CategoryContentScreen.js 中修改getSubCategoriesData
const getSubCategoriesData = async () => {
    setLoading(true);
    try {
        const selectedDocuments = await getCollectionDataWhere(
            FIREBASE_COLLECTION.CATEGORY_CONTENT,
            'parentId',
            documentId
        );
        setSubContent(selectedDocuments || []);
    } catch (err) {
        console.error('加载子分类失败:', err);
        setSubContent([]);
    } finally {
        setLoading(false);
    }
};

同时修正firebaseServices.js中的getCollectionDataWhere方法，确保字段名与组件逻辑一致，并正确使用query函数：

// firebaseServices.js 中修改getCollectionDataWhere
const getCollectionDataWhere = async (table, key, value) => {
    try {
        const q = query(collection(FIRESTORE_DB, table), where(key, '==', value));
        const querySnapshot = await getDocs(q);

        if (querySnapshot?.empty) {
            console.log('未找到匹配', key, '=', value, '的文档');
            return [];
        }

        const data = [];
        querySnapshot.forEach((doc) => {
            // 保持与addDocument中一致的documentId字段名
            data.push({ documentId: doc.id, ...doc.data() });
        });

        return data;
    } catch (error) {
        console.error('查询文档错误:', error);
        return [];
    }
};

3. 补充索引创建（按需）

首次使用where查询时，Firestore控制台可能会提示创建索引，按照提示链接完成索引创建，避免数据量较大时查询失败。

额外优化建议 #

• 实现分页查询：当单类别数据量仍较大时，结合limit和startAfter实现分页加载，进一步提升性能。
• 增加错误提示：在组件中添加请求失败的用户提示，提升用户体验。

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