如何在React Native中通过Firebase Cloud Functions发送反馈邮件

你完全可以通过Firebase Cloud Functions的Realtime Database onCreate触发器实现该需求，整体逻辑为：用户在React Native端提交反馈→数据写入Firebase Realtime Database的feedbacks节点→云函数监听到新节点创建→自动调用nodemailer发送邮件到你的目标邮箱。

一、云函数侧优化调整 #

你现有代码的核心逻辑没问题，但存在两个需要修正的问题：

1. mailTransport.sendMail是异步方法，不能直接同步调用，需要加await同时将触发函数改为async
2. Gmail默认禁止第三方客户端直接登录，需要先为账号开启两步验证后生成「应用专用密码」，如果使用Hotmail则替换对应SMTP配置即可。

优化后的代码如下：

const functions = require("firebase-functions");
const nodemailer = require('nodemailer');

// 读取配置初始化邮件传输实例
const senderEmail = functions.config().email_credentials.email;
const senderPwd = functions.config().email_credentials.password;
// 若使用Hotmail，替换为service: 'hotmail'即可，无需修改其他配置
const mailTransport = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: senderEmail,
    pass: senderPwd
  }
});

exports.sendFeedbackEmail = functions.database.ref('/feedbacks/{currentId}')
.onCreate(async (snapshot, context) => {
  // 读取新写入的反馈数据
  const feedbackData = snapshot.val();
  const {feedback, name, email: userEmail} = feedbackData;

  const mailOptions = {
    // Gmail要求发件人必须和认证的发件邮箱一致，不能直接使用用户邮箱，否则会发送失败
    from: senderEmail,
    replyTo: userEmail,
    to: senderEmail,
    subject: `用户反馈来自：${name}`,
    html: `<p>用户联系邮箱：${userEmail}</p><p>反馈内容：${feedback}</p>`
  };

  try {
    await mailTransport.sendMail(mailOptions);
    console.log(`反馈邮件发送成功，来自用户${name}`);
  } catch(error) {
    console.error('邮件发送失败：', error);
  }

  return null;
});

云函数部署前置操作 #

• 先在本地Firebase项目目录执行命令配置邮箱密钥：
  firebase functions:config:set email_credentials.email="你的邮箱地址" email_credentials.password="你的邮箱应用专用密码"
• 执行部署命令将云函数发布到Firebase：
  firebase deploy --only functions

二、React Native侧触发逻辑实现 #

前提是你已经在RN项目中集成了@react-native-firebase/database SDK，提交按钮的点击逻辑示例如下：

import database from '@react-native-firebase/database';
import { Alert } from 'react-native';

// 提交按钮点击事件，参数对应你输入框收集的信息
const handleSubmitFeedback = async (name, userEmail, feedbackContent) => {
  // 基础非空校验
  if(!name.trim() || !userEmail.trim() || !feedbackContent.trim()) {
    Alert.alert('提示', '请填写完整的反馈信息');
    return;
  }

  try {
    // 往feedbacks节点写入新数据，自动生成唯一ID
    await database()
      .ref('feedbacks')
      .push({
        name: name.trim(),
        email: userEmail.trim(),
        feedback: feedbackContent.trim(),
        createTime: Date.now()
      });
    Alert.alert('提交成功', '感谢你的反馈，我们会尽快处理');
  } catch (err) {
    console.error('反馈提交失败：', err);
    Alert.alert('提交失败', '请稍后重试');
  }
}

三、权限配置注意事项 #

需要给Realtime Database的feedbacks节点配置写入权限，规则示例如下：

{
  "rules": {
    "feedbacks": {
      ".read": false,
      ".write": true
    }
  }
}

生产环境建议补充字段校验规则，限制写入的字段类型和长度，避免恶意提交。

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