获取用户登录头像和昵称，遇到下面的问题？怎么解决

js:

Page({

  data: {

    userInfo: {},

    hasUserInfo: false,

    canIUseGetUserProfile: false,

  },

  onLoad() {

    if (wx.getUserProfile) {

      this.setData({

        canIUseGetUserProfile: true

      })

    }

  },

  getUserProfile(e) {

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认

    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

    wx.getUserProfile({

      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    })

  },

  getUserInfo(e) {

    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息

    this.setData({

      userInfo: e.detail.userInfo,

      hasUserInfo: true

    })

  },

})

wxml:

<view class="container">

  <view class="userinfo">

    <block wx:if="{{!hasUserInfo}}">

      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

    </block>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="/uploads/cj/article/2022/02/19/be31b6a6e4d808c860e072e74b469a9d.jpg" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

</view>

报错：

通常来说你的属性获取去错误了