使用OneSignal API开发网站通知，Firefox显示[object Object]问题求助

我之前也碰到过一模一样的问题！折腾了好一会儿才找到根源，咱们来一步步拆解：

可能的原因 #

• Payload结构不兼容Firefox：OneSignal的JS SDK在不同浏览器对通知payload的解析逻辑有差异。如果你在构建通知内容时，把message或者contents字段赋值成了对象类型（比如不小心传了{ en: "通知文本" }这种多语言对象，但没正确提取对应语言的字符串），Firefox会直接把对象转成字符串[object Object]，而Chrome等浏览器会自动处理多语言对象。
• SDK版本差异：旧版的OneSignal Firefox SDK对payload的容错性更低，不像Chrome会自动 fallback 到默认文本。
• 自定义通知模板的问题：如果你用了自定义通知模板，模板里引用的变量可能在Firefox中没有被正确解析成字符串，而是保留了对象引用。

解决方法 #

1. 确保通知内容是纯字符串 #

检查你调用OneSignal发送通知的代码，先排查是否传了对象而非字符串：
错误示例（会触发Firefox的异常）：

OneSignal.postNotification({
  headings: { en: "新消息提醒" },
  contents: { en: "您有一条未读消息" }, // 直接传多语言对象，Firefox不自动解析
});

正确写法：

// 单语言场景直接传字符串
OneSignal.postNotification({
  headings: "新消息提醒",
  contents: "您有一条未读消息",
});

// 多语言场景，手动提取当前语言对应的字符串
const userLanguage = navigator.language.split('-')[0]; // 从浏览器获取用户语言
OneSignal.postNotification({
  headings: { en: "New Message", zh: "新消息提醒" }[userLanguage],
  contents: { en: "You have an unread message", zh: "您有一条未读消息" }[userLanguage],
});

2. 升级OneSignal SDK到最新版本 #

旧版SDK在Firefox上的多语言payload处理存在bug，登录OneSignal后台把你的网站SDK更新到最新稳定版，很多兼容性问题都会被官方修复。

3. 检查自定义通知模板（如果使用了） #

如果你配置了自定义通知模板，确保模板里的变量是直接引用字符串字段：
错误的模板引用：

<div class="notification-content">{{contents}}</div> <!-- 若contents是对象，Firefox会显示[object Object] -->

正确的模板引用（针对多语言场景）：

<div class="notification-content">{{contents.en}}</div> <!-- 直接指定语言对应的字符串字段 -->

或者在传递payload前就把contents处理成字符串再传入模板。

4. 用原生API验证基础功能 #

可以先跳过OneSignal，用Firefox的原生Notification API测试，确认纯字符串的通知能正常显示：

// 测试原生通知是否正常
if (Notification.permission === "granted") {
  new Notification("测试标题", { body: "测试内容" });
}

如果原生通知正常显示，那问题肯定出在OneSignal的payload处理上，按照上面的方法调整即可。

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