在Supabase的updateUser方法中访问数据遇初始化错误

错误原因 #

你写的代码里犯了一个典型的变量生命周期错误：在调用supabaseClient.auth.updateUser()时，你试图在参数里引用data.user.user_metadata.mdSnippets——但这个data是updateUser执行完成后才会解构出来的变量，此时它还未被初始化，直接使用就会触发报错。

要扩展现有mdSnippets数组，必须先获取当前用户已有的元数据，再基于这个数据做更新操作。

修复方案 #

步骤说明 #

1. 先调用supabaseClient.auth.getUser()获取当前用户的完整元数据
2. 提取现有mdSnippets数组（如果用户还没有这个字段，用空数组做默认值）
3. 拼接新的snippet后，再调用updateUser完成更新

修改后的完整代码 #

const updateUserMetadata = async (formData) => {
    const idSegmentOne = Math.floor(Math.random() * 1e10).toString()
    const idSegmentTwo = Date.now().toString()
    const id = idSegmentOne + idSegmentTwo
    const snippet = {id: id, name: formData, body: input.input}

    try {   
      // 1. 先获取当前用户的元数据
      const { data: userData, error: userError } = await supabaseClient.auth.getUser();
      if (userError) throw userError;

      // 2. 拿到现有snippets，无数据时用空数组兜底
      const existingSnippets = userData.user.user_metadata.mdSnippets || [];

      // 3. 基于现有数据更新用户元数据
      const { data, error } = await supabaseClient.auth.updateUser({
        data: { mdSnippets: [ ...existingSnippets, snippet ] }
      })

      error
        ? toast.error('Saving snippet failed.')
        : toast.success('Snippet saved successfully.')
      console.log('Updating metadata error (try):', error)
    } catch (error) {
      toast.error('Saving snippet failed')
      console.log('Updating metadata error (catch):', error.message)
    }
  }

关键修改点 #

• 新增getUser()调用提前获取用户数据，用userData命名避免和后续updateUser返回的data混淆
• 用existingSnippets = ... || []处理用户还未创建mdSnippets字段的情况，防止解构空值报错
• 更新时使用已获取的existingSnippets拼接新内容，彻底避免引用未初始化变量的问题

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