在Next.js (CSR)中使用google云功能

Question

我试图在Next.js项目中使用firebase云功能，但有一些错误我不知道如何修复。

firebase-config.js

const firebaseConfig = {
apiKey: '~~~',
authDomain: '~~',
projectId: '~~~',
storageBucket: '~~~',
messagingSenderId: '~~~~~',
appId: '~~~~~',
measurementId: '~~~~',
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);
const functions = getFunctions(app);
let analytics = null;
if (app.name && typeof window !== 'undefined') {
analytics = getAnalytics(app);
}
export { db, auth, functions, analytics };

我在我的firebase中部署了addMessage云功能，并在/pages/friends页面中调用该功能

import React, { useEffect, useState } from 'react'
import { doc, getDoc } from 'firebase/firestore';
import { auth, functions } from '../../firebase-config';
import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
const addMessage = functions.httpsCallable('addMessage');
export default function FriendsPage() {
const [user, setUser] = useState(null);
const [friendsList, setFriendsList] = useState(null);
const currUser = auth.currentUser;
const _onAuthStateChanged = (handler) => {
if(!auth) return;
onAuthStateChanged(auth, (user) => { //TODO(aaron) : bug fix
if (user) {
const uid = user.uid;
console.log('AuthStateChanged', uid);
//user is signed in
handler(user);
} else {
// user is signed out
}
});
};
const addFriend = () => {
addMessage().then((res)=>{
console.log(res);
})
}
useEffect(()=>{
setFriendsList()
_onAuthStateChanged(setUser);
console.log(user);
}, []);
if(!user){
return(
<p>Loading...</p>
)
}
return (
<div>
<h3>{user.first}s friends List</h3>
<ul>
<li>h</li>
<li>h</li>
<li>h</li>
</ul>
<buton onClick={addFriend}>Call functions</buton>
</div>
)
}

但是弹出这个错误信息。我认为这可能是一个问题，当函数加载，我怎么能解决这个?

Server Error
TypeError: _firebase_config__WEBPACK_IMPORTED_MODULE_2__.functions.httpsCallable is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/friends/index.js (6:19) @ eval
4 | import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
5 | 
> 6 | const addMessage = functions.httpsCallable('addMessage');
|                   ^
7 | 
8 | export default function FriendsPage() {
9 |   const [user, setUser] = useState(null);

Answer 1

您将v8和v9的可调用函数语法混淆了。看起来你在应用程序中使用的是SDK的v9，而不是v8。当您导入getFunctions时，您不会获得一个具有名为httpsCallable的方法的对象。这就是错误信息试图告诉你的。相反，您需要导入函数httpsCallable，并将函数参数作为参数传递给它。请参阅v9文档中的示例。

import { getFunctions, httpsCallable } from "firebase/functions";
const functions = getFunctions();
const addMessage = httpsCallable(functions, 'addMessage');