如何在Firebase Github Auth认证流程中获取用户的GitHub用户名

核心问题点 #

• 异步逻辑未等待：createUserProfileDocument 中获取用户名的操作是异步的，但你没有对该Promise做await处理，函数会直接返回userRef，此时Firestore的用户文档还未写入username字段，上层首次读取snapshot时自然拿不到用户名数据。
• 多余的GitHub API调用：Firebase Github Auth认证成功后，返回的providerData对象中已经自带Github用户名，对应字段为screenName，不需要额外调用Github API获取，也避免了API调用出错、权限不足的问题。
• 旧文档残留：如果之前测试时已经创建过没有username字段的用户文档，后续登陆时因为snapShot.exists为true，不会触发写入逻辑，一直拿不到用户名。

可行修复步骤 #

第一步：修改createUserProfileDocument逻辑（推荐方案，无需额外调用GitHub API） #

直接用Firebase返回的screenName字段作为用户名，同时补全旧数据兼容逻辑：

export const createUserProfileDocument = async (userAuth) => {
  if (!userAuth) return
  const userRef = firestore.doc(`users/${userAuth.uid}`)
  const snapShot = await userRef.get()

  if (!snapShot.exists) {
    const { email, photoURL, providerData } = userAuth
    const createdAt = new Date()
    // 直接从providerData取用户名，不需要额外调用GitHub API
    const githubProviderData = providerData.find(p => p.providerId === 'github.com')
    const username = githubProviderData?.screenName
    const displayName = githubProviderData?.displayName
    try {
      await userRef.set({
        email,
        photoURL,
        createdAt,
        displayName: displayName || username,
        username,
      })
    } catch (error) {
      console.log(error.message)
    }
  } else {
    // 兼容旧用户：如果已有文档但没有username字段，自动补写
    const userData = snapShot.data()
    if (!userData.username) {
      const githubProviderData = userAuth.providerData.find(p => p.providerId === 'github.com')
      const username = githubProviderData?.screenName
      await userRef.update({ username })
    }
  }
  return userRef
}

第二步：清理测试数据 #

删除Firestore中users集合下之前测试生成的无username字段的旧文档，修复后的兼容逻辑也会自动给旧文档补写字段。

可选：保留GitHub API调用的修复方案 #

如果你确实需要调用GitHub API获取更多用户信息，需要对异步逻辑加await，避免提前返回：

if (!snapShot.exists) {
  const { email, photoURL, providerData } = userAuth
  const createdAt = new Date()
  // 加await等待API调用和文档写入完成
  try {
    const gitHubUserData = await getGitHubUserData(providerData[0].uid)
    const username = gitHubUserData.login
    await userRef.set({
      email,
      photoURL,
      createdAt,
      displayName: providerData[0].displayName,
      username,
    })
  } catch (err) {
    console.error("获取GitHub用户数据失败: ", err)
  }
}

注意：该方案需要确保getGitHubUserData函数传入的是正确的GitHub用户ID，且请求头带了正确的认证信息，避免API调用被限流或拒绝

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