如何在Expo构建的React Native应用中调用现有Firebase Cloud Function实现账号删除功能

首先要纠正一个关键逻辑：不能先登出再调用云函数——因为你的云函数依赖context.auth.uid获取当前用户ID，登出后用户失去认证状态，云函数会无法拿到用户ID导致调用失败。正确的顺序应该是先调用云函数（此时用户处于登录状态），完成账号和数据删除后，再登出客户端（或因账号被删除自动失效）。

下面分步骤实现：

1. 确保云函数已部署到你的Firebase项目 #

你的云函数目前不在RN目录中，需要先部署到对应Firebase项目：

• 进入云函数所在目录，执行firebase deploy --only functions
• 确认云函数的项目ID和RN项目firebaseConfig中的projectId完全一致
• 确保已配置云函数所需的fb.token：执行firebase login:ci获取token，再用firebase functions:config:set fb.token="你的token"设置

2. 根据Expo项目类型调整依赖与Firebase初始化 #

Expo分为Managed Workflow（无原生代码）和Bare Workflow（有原生代码），两种情况的配置略有不同：

如果你用的是Managed Workflow #

@react-native-firebase/functions需要原生链接，Expo Managed不支持，所以要换成Expo官方的Firebase包：

# 卸载原有依赖
yarn remove @react-native-firebase/functions
# 安装Expo Firebase核心与functions包
expo install expo-firebase-functions expo-firebase-core

然后修改你的firebase.js初始化文件：

import { initializeApp } from 'expo-firebase-app';

const firebaseConfig = {
  apiKey: "test",
  authDomain: "test",
  databaseURL: "test",
  projectId: "test",
  storageBucket: "test",
  messagingSenderId: "test",
  appId: "test"
};

// 初始化Firebase App
const app = initializeApp(firebaseConfig);
export default app;

如果你用的是Bare Workflow #

保留你已安装的@react-native-firebase/functions，确保已完成原生链接（通常yarn add后会自动处理，若有问题可参考React Native Firebase文档），你的原有firebase.js可以继续使用。

3. 给按钮添加点击事件并实现删除逻辑 #

在你的组件中，先导入所需模块，然后实现点击处理函数：

针对Managed Workflow的代码 #

import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import { getFunctions, httpsCallable } from 'expo-firebase-functions';
import { getAuth, signOut } from 'expo-firebase-auth';
import app from '../firebase'; // 路径根据你的文件位置调整

export default function YourComponent({ navigation }) {
  const handleDeleteAccount = async () => {
    // 弹出确认框，防止误操作
    Alert.alert(
      "确认删除账号",
      "此操作不可恢复，所有数据将被永久删除，是否继续？",
      [
        { text: "取消", style: "cancel" },
        { text: "确认", onPress: async () => {
          try {
            // 获取Functions实例
            const functions = getFunctions(app);
            // 获取云函数调用句柄
            const deleteUser = httpsCallable(functions, 'deleteUser');
            
            // 调用云函数（此时用户处于登录状态，云函数能拿到uid）
            await deleteUser();
            
            // 云函数执行成功后，登出用户
            await signOut(getAuth(app));
            
            // 提示用户并跳转到登录页
            Alert.alert("成功", "账号已永久删除");
            navigation.navigate("Login"); // 替换为你的登录页路由名称
          } catch (error) {
            console.error("删除失败:", error);
            Alert.alert("错误", `删除账号失败：${error.message || "未知错误"}`);
          }
        }}
      ]
    );
  };

  return (
    <View>
      <Text>Delete Account</Text>
      <View>
        <Button 
          title="Delete Account" 
          color="#F9578E" 
          accessibilityLabel="Delete Account"
          onPress={handleDeleteAccount}
        />
      </View>
    </View>
  );
}

针对Bare Workflow的代码 #

import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import firebase from '../firebase'; // 路径根据你的文件位置调整

export default function YourComponent({ navigation }) {
  const handleDeleteAccount = async () => {
    Alert.alert(
      "确认删除账号",
      "此操作不可恢复，所有数据将被永久删除，是否继续？",
      [
        { text: "取消", style: "cancel" },
        { text: "确认", onPress: async () => {
          try {
            // 获取云函数调用句柄
            const deleteUser = firebase.functions().httpsCallable('deleteUser');
            
            // 调用云函数
            await deleteUser();
            
            // 登出用户
            await firebase.auth().signOut();
            
            Alert.alert("成功", "账号已永久删除");
            navigation.navigate("Login");
          } catch (error) {
            console.error("删除失败:", error);
            Alert.alert("错误", `删除账号失败：${error.message || "未知错误"}`);
          }
        }}
      ]
    );
  };

  return (
    <View>
      <Text>Delete Account</Text>
      <View>
        <Button 
          title="Delete Account" 
          color="#F9578E" 
          accessibilityLabel="Delete Account"
          onPress={handleDeleteAccount}
        />
      </View>
    </View>
  );
}

关键注意事项 #

• 云函数的recursiveDelete依赖firebase-tools，确保版本兼容，且fb.token配置正确，否则会无法递归删除Firestore数据
• 云函数设置了540秒超时和2GB内存，这已经足够处理大量数据删除，但如果用户数据特别多，可能需要进一步优化
• 建议添加确认弹窗，防止用户误触删除按钮

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