Facebook登录报错Cannot read properties of undefined (reading 'data')求助

错误原因分析 #

从错误栈和代码来看，核心问题有三个：

1. JSX属性写法错误：appId=process.env.APP_ID不符合React JSX语法，会传递无效的appId，可能导致登录响应数据异常。
2. 嵌套属性未做安全校验：渲染用户信息时直接访问profile.picture.data.url，若picture或picture.data为undefined，就会抛出该错误。
3. 冗余代码无效：useEffect内定义的onResolve和onReject从未被调用，属于无效代码。

具体修复方案 #

1. 修正appId传递方式 #

React JSX中传递变量属性必须用大括号包裹，同时React仅识别以REACT_APP_开头的环境变量，需调整变量名：

appId={process.env.REACT_APP_FACEBOOK_APP_ID}

2. 安全访问嵌套属性 #

使用可选链操作符（?.）避免深层属性访问报错，兼容所有现代浏览器：

<img src={profile.picture?.data?.url} alt="User" />

若环境不支持可选链，可改用条件渲染：

{profile.picture && profile.picture.data && (
  <img src={profile.picture.data.url} alt="User" />
)}

3. 清理冗余代码 #

删除未使用的useEffect块，简化代码结构。

修改后的完整代码 #

import React, { useState } from "react";
import { LoginSocialFacebook } from "reactjs-social-login";
import { FacebookLoginButton } from "react-social-login-buttons";

function FacebookLogin() {
  const [profile, setProfile] = useState(null);

  return (
    <div>
      {!profile ? (
        <LoginSocialFacebook
          appId={process.env.REACT_APP_FACEBOOK_APP_ID}
          onResolve={(response) => {
            console.log("Response: ", response);
            if (response && response.data) {
              setProfile(response.data);
            } else {
              console.error("Response或response.data为空");
            }
          }}
          onReject={(error) => {
            console.log(error);
          }}
        >
          <FacebookLoginButton />
        </LoginSocialFacebook>
      ) : (
        <div>
          <h1>{profile.name}</h1>
          <img src={profile.picture?.data?.url} alt="User" />
        </div>
      )}
    </div>
  );
}

export default FacebookLogin;

额外检查项 #

• 确认.env文件中已配置REACT_APP_FACEBOOK_APP_ID=你的Facebook应用ID，且修改后重启了开发服务器（环境变量需重启生效）。
• 检查Facebook开发者后台的应用设置，确保回调域名、权限等配置正确，避免登录响应数据缺失。

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