Next.js(CSR)调用Firebase云函数报httpsCallable非函数错误

这个报错是两个问题叠加导致的：

1. 你用的是Firebase v9及以上版本的模块化SDK，不存在functions.httpsCallable()这种挂载在实例上的调用方法，所有功能API都需要从对应的子包中单独导入使用，老版本v8的链式写法在v9里已经废弃。
2. Next.js默认会在服务端预渲染页面，你在组件文件顶层直接执行functions.httpsCallable()时，服务端Node环境下Firebase客户端实例还没完成浏览器侧初始化，同时你写的Firebase配置文件没有做服务端环境兼容，直接访问未初始化的实例方法就会抛出「不是函数」的错误。

• 第一步：修正Firebase配置文件，补全缺失的导入逻辑，增加服务端环境兜底，避免SSR阶段执行浏览器专属代码。
  修正后的firebase-config.js完整代码如下：

  // 补全所有依赖方法的导入，从对应firebase子模块引入
  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  import { getDatabase } from "firebase/database";
  import { getFunctions } from "firebase/functions";
  // 如果你要使用Firestore数据库，单独引入对应方法
  // import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    apiKey: '~~~',
    authDomain: '~~',
    projectId: '~~~',
    storageBucket: '~~~',
    messagingSenderId: '~~~~~',
    appId: '~~~~~',
    measurementId: '~~~~',
  };
  
  // 避免服务端热重载时重复初始化App实例
  const app = !globalThis.firebaseApp ? initializeApp(firebaseConfig) : globalThis.firebaseApp;
  if (typeof window === 'undefined') {
    globalThis.firebaseApp = app;
  }
  
  // 仅在浏览器环境下初始化客户端服务实例，服务端返回null做兜底
  const db = typeof window !== 'undefined' ? getDatabase(app) : null;
  // 用Firestore的话替换上面的db初始化逻辑
  // const db = typeof window !== 'undefined' ? getFirestore(app) : null;
  const auth = typeof window !== 'undefined' ? getAuth(app) : null;
  const functions = typeof window !== 'undefined' ? getFunctions(app) : null;
  let analytics = null;
  if (typeof window !== 'undefined') {
    // 动态导入analytics，避免阻塞首屏加载
    import("firebase/analytics").then(({ getAnalytics }) => {
      analytics = getAnalytics(app);
    })
  }
  
  export { db, auth, functions, analytics };
  

• 第二步：修正页面调用逻辑，按照v9模块化SDK的规范导入httpsCallable方法，把云函数初始化逻辑移到客户端侧的事件回调/Effect中执行，避免服务端渲染阶段触发，同时修正代码里的标签拼写错误。
  修正后的/pages/friends/index.js代码如下：

  import React, { useEffect, useState } from 'react'
  // v9+版本httpsCallable需要单独从子包导入，不支持实例链式调用
  import { httpsCallable } from 'firebase/functions';
  import { auth, functions } from '../../firebase-config';
  import { onAuthStateChanged } from 'firebase/auth';
  
  export default function FriendsPage() {
    const [user, setUser] = useState(null);
    const [friendsList, setFriendsList] = useState(null);
  
    useEffect(()=>{
      if(!auth || !functions) return;
      // 注册登录态监听，组件卸载时取消监听避免内存泄漏
      const unsub = onAuthStateChanged(auth, (loginUser) => {
        setUser(loginUser || null);
      });
      setFriendsList([]);
      return () => unsub();
    }, []);
  
    const addFriend = () => {
      if(!functions) return;
      // 点击事件触发时才初始化callable实例，确保运行在浏览器环境、functions实例已完成初始化
      const addMessage = httpsCallable(functions, 'addMessage');
      addMessage().then((res)=>{
          console.log(res);
      }).catch(err => {
        console.error('云函数调用失败:', err);
      })
    }
  
    if(!user){
        return(
            <p>Loading...</p>
        )
    }
  
    return (
      <div>
          <h3>{user.displayName || user.uid}的好友列表</h3>
          <ul>
              <li>测试好友1</li>
              <li>测试好友2</li>
              <li>测试好友3</li>
          </ul>
          {/* 修正原代码里的buton拼写错误为button */}
          <button onClick={addFriend}>调用云函数</button>
      </div>
    )
  }
  

• 如果你的云函数不是部署在默认的us-central1区域，初始化functions实例时需要传入区域参数，示例：const functions = typeof window !== 'undefined' ? getFunctions(app, '你的云函数部署区域，比如asia-east1') : null，否则调用时会报404找不到函数。
• 你当前代码中从firebase/firestore导入了文档操作方法，但配置里初始化的是Realtime Database实例（getDatabase），如果需要使用Firestore数据库，请把db的初始化逻辑替换为getFirestore(app)，否则后续调用数据库方法也会报错。
• Pages Router下不要在getServerSideProps、getStaticProps等服务端执行的方法中调用客户端Firebase实例，如果需要在服务端操作Firebase，请单独使用Firebase Admin SDK。

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