如何在SSR Next.js组件中获取Firebase Remote Config数据？

我用Next.js搭建站点，想要实现静态化同时支持动态路由。目前的做法是把动态路由组件用SSR包裹，通过generateStaticParams在构建阶段生成路由。但现在需要从Firebase Remote Config获取数据来生成这些路由参数，尝试封装工具函数后无法正常工作。

此前CSR中可行的实现方式 #

const [data, setData] = useState([]);

const configKey = 'data';

useEffect(() => {
  const remoteConfig = getRemoteConfig(firebaseApp);
  fetchAndActivate(remoteConfig)
    .then(() => {
      const value = getValue(remoteConfig, configKey);
      const valueString = value.asString();
      const data = JSON.parse(valueString);

      setData(data);
    })
    .catch((err) => {
      console.log(err);
    });
}, [data]);

封装后无效的工具函数及调用 #

工具函数 #

export async function getDataFromRemoteConfig(configKey: string) {
  try {
    const remoteConfig = getRemoteConfig(firebaseApp);
    await fetchAndActivate(remoteConfig);

    const value = getValue(remoteConfig, configKey);
    const valueString = value.asString();

    return JSON.parse(valueString);
  } catch (error) {
    console.error('Error fetching projects from Remote Config:', error);
    return [];
  }
}

调用方式 #

const data = await getDataFromRemoteConfig('data')

解决方案 #

在generateStaticParams这类构建时运行的函数中，不能直接使用客户端Firebase SDK——因为构建环境是Node.js，得用Firebase Admin SDK来访问Remote Config。

步骤1：安装Firebase Admin SDK #

npm install firebase-admin

步骤2：初始化Admin SDK #

创建文件lib/firebase-admin.ts，用于初始化Admin SDK：

import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n')
    })
  });
}

export const remoteConfig = admin.remoteConfig();

步骤3：重构工具函数 #

修改工具函数，改用Admin SDK获取Remote Config数据：

import { remoteConfig } from './lib/firebase-admin';

export async function getDataFromRemoteConfig(configKey: string) {
  try {
    const template = await remoteConfig.getTemplate();
    const value = template.parameters[configKey]?.defaultValue?.value;
    
    if (!value) {
      console.warn(`配置项 ${configKey} 未找到`);
      return [];
    }
    
    return JSON.parse(value);
  } catch (error) {
    console.error('从Remote Config获取数据失败:', error);
    return [];
  }
}

步骤4：在generateStaticParams中调用 #

export async function generateStaticParams() {
  const data = await getDataFromRemoteConfig('data');
  
  // 根据获取到的数据生成路由参数，示例：
  return data.map(item => ({
    id: item.id.toString()
  }));
}

注意事项 #

• 确保构建环境中已配置环境变量FIREBASE_CLIENT_EMAIL、FIREBASE_PRIVATE_KEY、NEXT_PUBLIC_FIREBASE_PROJECT_ID
• 用于初始化Admin SDK的服务账号，需要拥有Remote Config的访问权限（比如Remote Config Viewer或Remote Config Editor角色）

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