React项目中通过Firebase Auth调用Facebook Graph API获取大尺寸头像问题

API 探路者

2026-10-5

解决方案

问题根本原因

你使用Fetch调用接口后拿到的是原始Response对象，响应内容存放在可读流body中，没有经过解析，直接读取res.picture肯定返回undefined
你写的Fetch请求URL里存在换行符，会导致参数传参异常，需要去除多余换行
Facebook Graph API返回的头像字段是嵌套结构，不能直接取picture，需要按层级读取picture.data.url

修正后的完整代码

const signUpWithFb = async ()=>{
    console.log("\n Auth Provider Function Start \n");
    const provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('email');
    try {
        const result = await firebase.auth().signInWithPopup(provider);
        console.log("\n Auth Provider before Fetch Function \n");
        // 注意去除URL里的换行，避免参数异常
        const fbRes = await fetch(`https://graph.facebook.com/v11.0/me?fields=name,picture.width(960).height(960),first_name,last_name,email&access_token=${result.credential.accessToken}`);
        // 解析响应流为JSON对象
        const fbUserInfo = await fbRes.json();
        console.log("Response Status:  "+fbRes.status);
        console.log("Response Type:  "+fbRes.type);
        console.log("Response Status Text:  "+fbRes.statusText);
        console.log("解析后的用户完整数据：", fbUserInfo);
        // 头像地址需要按嵌套结构读取
        const avatarUrl = fbUserInfo.picture?.data?.url;
        console.log("960*960尺寸的用户头像地址：", avatarUrl);
        console.log("\n Auth Provider Function End After Fetch Function \n");
    } catch (err) {
        console.error("登录或拉取用户信息失败：", err);
    }
}