在firebase version 9 FCM实现时出现错误

Question

我想在我的下一个js(版本12)应用程序中添加推送通知，因此在其上实现了firebase云消息。实现如下:

import { initializeApp, getApp, getApps } from "firebase/app"
import { getMessaging, getToken } from "firebase/messaging"
import { firebaseConfig } from "./config"
const app = !getApps.length ? initializeApp(firebaseConfig) : getApp()

并添加了cloudMessaging获取FCM令牌的函数。和onMessageListener显示前台消息

export const cloudMessaging = async () => {
const token = await isTokenAvailable()
if (token !== null) {
return Promise.resolve({
status: true,
token: token,
})
}
try {
const permission = await Notification.requestPermission()
const messaging = getMessaging(app)
console.log(messaging)
console.log(permission)
if (permission === "granted") {
const FCM_TOKEN = await getToken(messaging, {
vapidKey: process.env.NEXT_PUBLIC_FCM_VAPID_KEY,
})
if (FCM_TOKEN) {
localStorage.setItem("fcm_token_prac", FCM_TOKEN)
return Promise.resolve({
status: true,
token: FCM_TOKEN,
})
}
}
} catch (err) {
console.log(err, "cloudmessaging error")
return Promise.resolve({
status: false,
})
}
}
export const onMessageListener = () => {
const messaging = getMessaging(app)
console.log(messaging)
return new Promise((res) => {
messaging.onMessage((payload) => {
res(payload)
})
})
}

并从我的布局组件

调用这些函数

useEffect(() => {
firebaseInit()
async function firebaseInit() {
try {
await cloudMessaging()
} catch (err) {
console.log(err)
}
}
}, [])
useEffect(() => {
onMessageListener()
.then((payload) => {
console.log(payload, "onMessageListener")
})
.catch((err) => console.log(err, "onMessageListener useEffect"))
}, [])

但是在我的控制台得到这个错误:

TypeError: messaging.onMessage is not a function
at eval (firbase.js?100f:58:15)
at new Promise (<anonymous>)
at onMessageListener (firbase.js?100f:57:10)
at eval (Layout.js?4f8d:33:22)
at commitHookEffectListMount (react-dom.development.js?ac89:23049:1)

我找不出哪里出了错。谁能指导我实现这个?

Answer 1

我认为你可以尝试添加onMessage导入部分。

import { getMessaging, getToken, onMessage } from "firebase/messaging"

在线移除messaging

messaging.onMessage

是

onMessage((payload) => {
res(payload)
})

这是SDK版本9