调用signInWithCredential时报Cannot read properties of undefined (reading 'credential')错误

核心原因 #

错误表明云函数接收到的data对象中不存在credential属性，导致访问data.credential时触发undefined异常。大概率是客户端传参错误，或是客户端未正确获取Google登录凭证。

解决步骤 #

1. 确认客户端传参逻辑

React端使用GoogleLogin组件时，必须将获取到的Google凭证（id_token）以credential字段传递给云函数。示例代码如下：

import { GoogleLogin } from '@react-oauth/google';
import { getFunctions, httpsCallable } from 'firebase/functions';

const functions = getFunctions();
const signInWithGoogle = httpsCallable(functions, 'signInWithGoogle');

const handleGoogleLoginSuccess = async (response) => {
  // 关键：response.credential就是Google返回的id_token
  try {
    await signInWithGoogle({ credential: response.credential });
    console.log('登录成功');
  } catch (error) {
    console.error('登录失败:', error);
  }
};

// 渲染Google登录按钮
<GoogleLogin
  onSuccess={handleGoogleLoginSuccess}
  onError={() => console.log('Google登录触发错误')}
/>

注意：如果使用的是旧版react-google-login库，凭证字段可能是response.tokenId，此时需要调整为{ credential: response.tokenId }。

2. 检查云函数日志

查看云函数的日志输出（console.log('Received data:', data)），确认实际接收到的data内容：

• 如果日志显示data为空对象，说明客户端调用云函数时未传递任何参数；
• 如果data中没有credential字段，说明客户端传参的字段名错误（比如写成token或idToken），需要统一字段名。

3. 修正云函数的凭证处理逻辑

如果客户端传递的是idToken而非credential，需要同步修改云函数代码：

// 假设客户端传的是data.idToken
const credential = admin.auth.GoogleAuthProvider.credential(data.idToken);

若需要同时传入access_token，可调整为：

const credential = admin.auth.GoogleAuthProvider.credential(data.idToken, data.accessToken);

4. 验证Admin SDK初始化

确保云函数已正确初始化Firebase Admin SDK：

const admin = require('firebase-admin');
admin.initializeApp();

初始化异常可能导致admin.auth()无法正常工作，但此问题并非当前错误的直接原因，仅作为兜底检查项。

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