Nuxt3中从Supabase获取数据返回空数组问题排查

• 检查Supabase行级安全策略（RLS）
  Supabase新建表默认开启RLS，且无默认访问策略，会直接阻止前端读取数据。可在Supabase控制台的SQL编辑器执行测试策略（生产环境需按需限制权限）：

  CREATE POLICY "允许公开读取images表" ON public.images
  FOR SELECT USING (true);
  

  也可在表编辑器->权限面板手动配置读取权限。

• 核对表名与字段名大小写
  PostgreSQL对大小写敏感，若数据库表实际为Images（首字母大写），但代码中用images查询，会返回空结果。去Supabase控制台确认表名的准确拼写。

• 验证环境变量加载状态
  确保.env文件中变量名为SUPABASE_URL和SUPABASE_KEY（全大写），且Nuxt3能正确读取。可在代码中打印配置信息验证：

  const config = useRuntimeConfig()
  console.log(config.public.supabaseUrl, config.public.supabaseKey)
  

  若输出undefined，检查.env是否在项目根目录，或变量名是否拼写错误。

• 捕获查询错误信息
  原代码未处理错误，可能查询已报错但未暴露。修改代码添加错误捕获：

  const client = useSupabaseClient()
  
  const {data: images, error} = await useAsyncData('images', async () => {
    const { data, error } = await client.from('images')
      .select('*')
      .order('created_at')
    if (error) throw error
    return data
  })
  
  console.log(images.value, error.value);
  

  控制台的error信息会直接定位问题，比如权限不足、表不存在等。

• 确认数据库数据已提交
  前往Supabase控制台表编辑器查看images表，确保数据是已保存状态，而非未提交的草稿行。

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