React+Sanity+Tailwind下Google登录后头像无法显示问题排查

该问题属于该技术栈+教程适配新Google登录规则时的高频问题，按以下优先级逐一排查即可定位：

1. 第一优先级：检查data.js的GROQ用户查询语句 #

80%的同类问题出在TS转JS时漏写图片字段的引用展开：
Sanity中的图片字段为引用类型，必须通过->关联asset属性才能拿到可访问的URL，转JS时很容易漏写这段投影逻辑，或者直接遗漏头像字段。
找到data.js中拉取当前登录用户的查询方法，修正为如下写法：

export const fetchUser = (userId) => {
  // 注意查询投影的字段写法
  const userQuery = `*[_type == "user" && _id == $userId][0]{
    _id,
    userName,
    "userImage": image.asset->url
  }`
  return client.fetch(userQuery, { userId })
}

常见错误写法：要么完全没写image字段，要么直接写image返回引用ID，前端拿到的不是可访问的图片URL，自然加载失败。

2. 第二优先级：检查App.js的全局用户状态赋值 #

TS转JS时容易搞错Sanity返回值的层级，导致用户对象字段丢失：

• Sanity JS客户端的fetch方法返回的直接就是文档对象，不存在.data嵌套层，不要给返回值额外套一层属性取值
• 检查登录回调、页面初始化从本地缓存取用户信息的逻辑，确保赋值给全局state的是完整的用户对象：

// 登录回调逻辑示例
const handleGoogleLogin = async (authResult) => {
  const userInfo = await createOrFetchUser(authResult)
  // 错误写法：setUser(userInfo.data) 多套了一层data
  setUser(userInfo) // 正确写法，直接赋值Sanity返回的文档对象
  localStorage.setItem('loggedInUser', JSON.stringify(userInfo))
}

// 页面初始化取缓存逻辑
useEffect(() => {
  const cachedUser = localStorage.getItem('loggedInUser')
  if (cachedUser) {
    try {
      setUser(JSON.parse(cachedUser))
    } catch (err) {
      localStorage.removeItem('loggedInUser')
    }
  }
}, [])

3. 第三优先级：检查Home组件的头像渲染逻辑 #

• 确认渲染时取的字段名和GROQ查询返回的字段名完全一致：如果查询时重命名为userImage，渲染时就要取user.userImage，不要错写为user.image
• 新Google鉴权规则返回的头像URL自带签名校验参数，不要用会自动截断URL参数的自定义图片组件，先用原生img标签验证可用性：

<img
  src={user?.userImage}
  alt={user?.userName}
  className="w-10 h-10 rounded-full object-cover"
/>

• 如果原生img仍加载失败，把user.userImage打印到控制台：如果输出值是image-xxx-xxx-jpg格式的引用ID，回到第一步修正GROQ查询；如果输出是undefined，回到第二步检查状态赋值逻辑。

4. 第四优先级：检查Sanity写入逻辑的字段格式 #

登录Sanity后台查看对应用户文档，检查image字段的存储格式：

• 如果适配新登录规则时，你把Google返回的头像URL直接存成了字符串类型，而非Sanity原生图片引用类型，那么image.asset->url的写法拿不到值，把GROQ查询里的头像字段改为"userImage": image直接取字符串值即可。
• 如果字段完全没有值，检查写入用户数据的逻辑，确认Google授权成功后，头像字段正确传入了文档创建参数。

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