React.js中Firebase RemoteConfig无法返回数据问题求助

我正在开发React.js应用，尝试用Firebase Remote Config实现自定义配置，但始终无法获取到后台设置的配置数据。以下是我的实现代码：

Firebase多项目初始化（指定实例名"third"） #

import { getFirestore } from '@firebase/firestore';
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_DISTRIBUCION_API_KEY,
    authDomain: process.env.REACT_APP_DISTRIBUCION_AUTH_DOMAIN,
    appId: process.env.REACT_APP_DISTRIBUCION_APP_ID,
    databaseURL: process.env.REACT_APP_DISTRIBUCION_DATABAS_EURL,
    measurementId: process.env.REACT_APP_DISTRIBUCION_MEASUREMENT_ID,
    messagingSenderId: process.env.REACT_APP_DISTRIBUCION_MESSAGING_SENDER_ID,
    projectId: process.env.REACT_APP_DISTRIBUCION_PROJECT_ID,
    storageBucket: process.env.REACT_APP_DISTRIBUCION_STORAGE_BUCKET,
};

export const distribucion = initializeApp(firebaseConfig, 'third');
export const distribucion_db = getFirestore(distribucion);

Remote Config实例创建 #

import { getRemoteConfig } from '@firebase/remote-config';
import { distribucion } from '../adapter/distribucionConfig';

export const remoteConfig = getRemoteConfig(distribucion);

获取配置的业务逻辑 #

const webConfig = async () => {
        const isConfighFetched = await fetchAndActivate(remoteConfig);
        if (isConfighFetched) {
            console.log(getValue(remoteConfig, 'map_config'));
        } else {
            console.log('fuck it');
            console.log(getValue(remoteConfig, 'map_config'));
        }
    };

useEffect(() => {
    webConfig();
}, []);

我已在Firebase后台创建了authentication和map_config两个JSON类型的配置项，但控制台始终返回非预期结果。请问问题出在哪里？

排查建议： #

• 必须设置默认配置：Remote Config需要先设置默认值，否则首次获取失败或无缓存时会返回空。初始化后添加：

  remoteConfig.defaultConfig = {
    map_config: JSON.stringify({/* 你的默认JSON结构 */}),
    authentication: JSON.stringify({/* 你的默认JSON结构 */})
  };
  

• 错误处理与值解析：当前代码未捕获异常，且JSON类型配置需先转字符串再解析。修改获取逻辑：

  const webConfig = async () => {
    try {
      const isFetched = await fetchAndActivate(remoteConfig);
      const configVal = getValue(remoteConfig, 'map_config').asString();
      console.log('配置值:', JSON.parse(configVal));
      console.log('是否激活成功:', isFetched);
    } catch (err) {
      console.error('获取配置出错:', err);
    }
  };
  

• 确认后台配置已发布：Firebase后台的配置项必须点击「发布更改」才能生效，未发布的配置仅测试模式可见。
• 开发环境禁用缓存：默认缓存周期较长，开发时可设置跳过缓存：

  import { setConfigSettings } from '@firebase/remote-config';
  
  // 初始化Remote Config后添加
  setConfigSettings(remoteConfig, {
    minimumFetchIntervalMillis: 0 // 生产环境建议设为3600000（1小时）
  });
  

• 检查网络与权限：确保应用所在环境能访问Firebase API，无防火墙或CORS限制。

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