点击通知跳转Flutter指定页面问题求助（使用JavaScript云函数）

我来帮你搞定这个跳转问题，咱们一步步拆解排查：

1. 先检查Cloud Function的推送Payload结构 #

FCM的消息分两种类型：notification（系统级通知）和data（自定义数据消息），如果你的推送只发了notification消息，在App后台或杀死状态下，点击通知可能无法正确传递自定义的order_id，导致跳转到页面时拿不到参数。

你需要在Cloud Function里确保推送Payload包含**data字段**，并且如果要控制通知点击行为，记得加上click_action（针对Android）。比如你的JS Cloud Function代码应该改成这样：

const admin = require('firebase-admin');
admin.initializeApp();

exports.sendNotification = async (req, res) => {
  const orderId = req.body.orderId;
  const token = req.body.token;

  const payload = {
    notification: {
      title: "新订单通知",
      body: "你有一个新的订单",
      click_action: "FLUTTER_NOTIFICATION_CLICK" // 关键：告诉Android点击后交给Flutter处理
    },
    data: {
      order_id: orderId, // 把需要的参数放在data里
      type: "order_detail" // 可选：用来区分不同类型的推送跳转
    }
  };

  try {
    await admin.messaging().sendToDevice(token, payload);
    res.status(200).send("通知已发送");
  } catch (error) {
    res.status(500).send(error.message);
  }
};

2. 修复Flutter端的跳转逻辑 #

你的现有代码里，onLaunch和onResume直接跳转到DetailOrder，但没有传递order_id参数，而且可能没正确提取消息里的自定义数据。修改后的代码应该先拿到order_id，再把参数传给目标页面：

_fcm.configure(
  onMessage: (Map<String, dynamic> message) async {
    print("onMessage: $message");
    String orderId = message['data']['order_id'];
    getOrder(orderId);
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: ListTile(
          title: Text(message['notification']['title']),
          subtitle: Text(message['notification']['body']),
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('Ok'),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  },
  onLaunch: (Map<String, dynamic> message) async {
    print("onLaunch: $message");
    // 提取order_id，注意Android和iOS的消息结构可能略有差异，统一取data里的字段
    String orderId = message['data']['order_id'] ?? '';
    if (orderId.isNotEmpty) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => DetailOrder(orderId: orderId), // 传递参数
        )
      );
    }
  },
  onResume: (Map<String, dynamic> message) async {
    print("onResume: $message");
    String orderId = message['data']['order_id'] ?? '';
    if (orderId.isNotEmpty) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => DetailOrder(orderId: orderId), // 传递参数
        )
      );
    }
  },
);

3. 确认平台配置 #

• Android：确保你的AndroidManifest.xml里已经配置了FLUTTER_NOTIFICATION_CLICK的intent filter，比如在MainActivity里添加：

  <intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
  

• iOS：在Info.plist里添加后台推送权限：

  <key>UIBackgroundModes</key>
  <array>
    <string>remote-notification</string>
  </array>
  

关键注意点 #

• 当App处于前台时，onMessage会触发，你已经处理了弹窗；当App在后台或被杀死时，点击通知会触发onResume或onLaunch，这时候必须从message['data']里取自定义参数，而不是message['notification']。
• 如果使用纯data消息（不包含notification字段），FCM不会自动显示系统通知，需要你在onMessage里自己构建通知（比如用flutter_local_notifications插件），但这种方式能更灵活地控制跳转逻辑。

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