React-Native集成Firebase与Facebook登录：credential未定义报错

看起来你遇到的核心问题是firebase.auth().FacebookAuthProvider返回了undefined，导致调用credential方法时报错。我来给你几个排查和解决的方向：

1. 确认RNFirebase Auth模块的导入和安装是否正确 #

首先，确保你已经正确安装了@react-native-firebase/auth包，并且完成了两端的配置：

• iOS：执行过pod install，并且在Podfile里已经包含了Auth模块
• Android：检查android/app/build.gradle里是否添加了Auth的依赖，并且google-services.json配置正确

然后，代码里的导入方式要正确，建议直接导入auth模块：

import auth from '@react-native-firebase/auth';

2. 修正FacebookAuthProvider的引用方式 #

RNFirebase的FacebookAuthProvider并不是挂在firebase.auth()实例上的，而是作为auth模块的导出项存在的。你需要调整代码里的引用：

修改前的错误写法：

const credential = firebase.auth().FacebookAuthProvider.credential(data.accessToken)

修改后的正确写法：

// 先从auth模块解构出FacebookAuthProvider
const { FacebookAuthProvider } = auth;
// 或者直接使用auth.FacebookAuthProvider
const credential = FacebookAuthProvider.credential(data.accessToken);

3. 检查版本兼容性 #

版本不匹配是这类问题的常见原因：

• 确保@react-native-firebase/auth的版本和你的React Native版本兼容
• 如果你用的是react-native-fbsdk-next（新版FBSDK），也要确认它和RNFirebase的版本能互相配合
• 可以去RNFirebase的官方文档查看版本支持矩阵，避免版本冲突

4. 重新验证初始化流程 #

• 确保Firebase在App启动时已经完成初始化，比如在项目的入口文件（如index.js）里，确认没有遗漏初始化步骤（部分RNFirebase版本会自动初始化，但最好检查一下）
• 再次核对iOS的Info.plist和Android的AndroidManifest.xml里的Facebook配置项，包括App ID、Client Token、URL Schemes等，这些配置错误也可能间接导致Auth模块异常

修改后的完整示例代码 #

import auth from '@react-native-firebase/auth';
import { LoginManager, AccessToken } from 'react-native-fbsdk-next'; // 或者旧版的react-native-fbsdk

export const logintoFB = () => { 
  return (dispatch, getState) => { 
    return LoginManager.logInWithReadPermissions(['public_profile', 'email'])
      .then((result) => { 
        if (result.isCancelled) { 
          return Promise.reject(new Error('The user cancelled the request')); 
        } 
        return AccessToken.getCurrentAccessToken(); 
      })
      .then((data) => { 
        console.log(data);
        const { FacebookAuthProvider } = auth;
        const credential = FacebookAuthProvider.credential(data.accessToken);
        console.log(credential);
        return auth.signInAndRetrieveDataWithCredential(credential);
      })
      .then((user) => { 
        dispatch({type: types.LOGIN_STANDARD, credential: user}); 
      })
      .catch((error) => { 
        const { code, message } = error; 
        dispatch({type: types.LOGIN_STANDARD_FAILURE, ex: error}); 
      }); 
  } 
}

如果按照上面的步骤调整后还是有问题，可以检查一下控制台的其他报错信息，看看是否有模块未加载、配置缺失的提示，这些都能帮你进一步定位问题。

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