Firebase Google登录代码中函数赋值与直接调用赋值的差异及原因解析

首先先看这段Firebase初始化的基础代码：

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const config = { }
firebase.initializeApp(config);
export const auth = firebase.auth();
export const firestore = firebase.firestore();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(provider);
export default firebase;

两种写法对比 #

正确写法 #

export const signInWithGoogle = () => auth.signInWithPopup(provider);

错误写法 #

export const signInWithGoogle = auth.signInWithPopup(provider);

差异与原因解释 #

咱们一步步拆解这两种写法的本质区别：

• 错误写法的问题：
  这行代码是直接调用了auth.signInWithPopup(provider)方法，而且会在你的模块被加载的那一刻就执行这个方法——也就是说，用户刚打开页面，还没点任何登录按钮，Google的登录弹窗就直接弹出来了，这显然完全不符合交互逻辑。
  除此之外，auth.signInWithPopup()返回的是一个Promise对象，所以错误写法里signInWithGoogle最终会是一个Promise，而不是一个可调用的函数。之后你想在点击事件里调用它的时候，根本没法触发登录操作，反而会因为尝试调用Promise而报错。

• 正确写法的合理性：
  这里是把一个箭头函数赋值给了signInWithGoogle，模块加载时只会定义这个函数，不会执行里面的登录逻辑。只有当你主动调用signInWithGoogle()（比如给登录按钮绑定点击事件，点击时触发这个函数），才会执行auth.signInWithPopup(provider)，弹出登录弹窗。
  这种写法相当于把登录操作封装成了一个"待触发的动作"，把执行时机交给开发者控制，完全符合前端交互的预期——用户需要登录时才触发登录流程，而不是强制被动触发。

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