如何修复React Firebase代码中SyntaxError: Unexpected token '!'错误

问题原因及修复方案 #

你遇到的SyntaxError: Unexpected token '!'报错主要由以下几个常见问题导致，对应修复方式如下：

• 最直接的原因：你代码中箭头函数的符号被转义成了HTML特殊字符>，实际合法的JS箭头函数应该写为=>，如果你的本地源码里用的是>，直接替换为=>即可解决语法报错。
• 如果你确认箭头函数写法正确，那就是Firebase版本不兼容导致：你现在用的是Firebase 8及以前的命名空间式写法，若本地安装的是v9及以上的模块化Firebase SDK，旧写法会触发报错，同时你把Firebase初始化逻辑写在组件内部，每次组件渲染都会重复执行初始化，也会引发异常。

修复后代码示例 #

import React from 'react';
// 如果使用v9+版本Firebase，改用compat兼容包导入即可沿用旧写法
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

// 初始化逻辑移到组件外部，避免重复初始化
const firebaseConfig = {
  // 填入你自己的配置信息
};
firebase.initializeApp(firebaseConfig);

export default function App() {
  function signInWithGoogle() {
    const google_provider = new firebase.auth.GoogleAuthProvider();
    firebase
      .auth()
      .signInWithPopup(google_provider)
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  return (
    <div>
      <h1>Google Sign In Authentication</h1>
      <button onClick={signInWithGoogle}>Sign In</button>
    </div>
  );
}

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