Firebase集成Stripe支付报错：TypeError: 无法读取undefined的getProvider属性

出现TypeError: Cannot read properties of undefined (reading 'getProvider')的核心原因是代码中使用的app变量未被正确定义或导入——Firebase Functions SDK需要依赖有效的Firebase App实例来获取认证提供者，当前代码里的app是未初始化的undefined值。

解决步骤 #

1. 确保Firebase App实例已正确导入并初始化 #

你需要在组件中获取或导入已初始化的Firebase App实例，替换当前未定义的app变量：

方式一：使用getApp()获取全局初始化的App

修改组件的<script>部分：

import { getApp } from "firebase/app";
import { getFunctions, httpsCallable } from "firebase/functions"

export default {
  props: ["subscription"],
  data() {
    return { isLoading: false }
  },
  methods: {
    async openCustomerPortal() {
      this.isLoading = true
      // 获取已初始化的Firebase App实例
      const app = getApp();
      console.log(app)

      const functions = getFunctions(app, 'us-central1') 
      const functionRef = httpsCallable(
        functions,
        "ext-firestore-stripe-payments-createPortalLink",
      )

      const { data } = await functionRef({
        returnUrl: window.location.origin,
      })

      window.location.assign(data.url)
    },
  },
}

方式二：导入项目中已初始化的App实例

如果你的项目在main.js（或类似入口文件）中单独初始化了Firebase App，可以将其导出后在组件中导入：

// main.js 中的初始化代码
import { initializeApp } from "firebase/app";
const firebaseConfig = { /* 你的Firebase配置信息 */ };
export const app = initializeApp(firebaseConfig);

然后在组件中导入该实例：

import { app } from '@/main'; // 根据你的项目路径调整
import { getFunctions, httpsCallable } from "firebase/functions"

// 后续代码保持不变

2. 额外排查项 #

• 确认当前用户已通过Firebase Auth完成认证：Stripe客户门户扩展需要调用者为已认证用户，虽然订阅信息显示正常，但可在调用函数前添加Auth状态校验：

  import { getAuth } from "firebase/auth";
  // ...
  async openCustomerPortal() {
    const auth = getAuth(app);
    if (!auth.currentUser) {
      console.error("用户未认证");
      this.isLoading = false;
      return;
    }
    // ... 后续代码
  }
  

• 检查Firebase扩展ext-firestore-stripe-payments-createPortalLink的安装状态：确保该扩展已正确部署到你的Firebase项目，且配置了正确的Stripe API密钥和Firestore集合。

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