React集成Supabase查询无结果，数据库有数据却返回空数组求助

你的代码语法无错，请求返回200说明Supabase连接正常，但前端查不到数据、控制台能查到的情况，大概率是权限或配置问题，按以下步骤排查：

• 检查Row Level Security（RLS）策略
  Supabase默认给新建表开启RLS，控制台查询不受RLS限制，但前端请求会被拦截。进入Supabase控制台的invoices表页面，切换到Policies标签：

  • 如果没有任何读取策略，添加一个测试策略（比如CREATE POLICY "允许所有用户读取发票" ON invoices FOR SELECT USING (true);），或者暂时关闭RLS（仅测试用，生产环境不建议）验证是否能查到数据。
  • 如果已有策略，检查策略条件是否符合当前请求的用户状态（比如是否要求用户登录，而前端未认证）。

• 捕获查询错误信息
  你的代码只获取了data，忽略了error对象，修改getInvoices函数打印错误，能直接定位问题：

  async function getInvoices() {
    const { data, error } = await supabase.from("invoices").select("*");
    if (error) console.error("查询错误:", error);
    setInvoices(data || []);
    console.log("获取的发票数据:", data);
  }
  

  即使请求返回200，也可能存在权限不足等查询层面的错误，打印error能快速找到原因。

• 验证客户端初始化配置
  检查./client.js中的Supabase初始化代码，确保SUPABASE_URL和SUPABASE_ANON_KEY完全正确：

  • 匿名密钥（anon key）必须是项目设置里的anon public密钥，不能用服务端密钥（service role key）。
  • 确认密钥对应的权限包含invoices表的读取权限（在Supabase控制台的API -> Settings里查看密钥的权限范围）。

• 核对表名和字段名的大小写
  Supabase的表名和字段名是大小写敏感的，确保代码里的"invoices"和控制台的表名完全一致，invoice.family的字段名也和控制台匹配（避免拼写或大小写错误导致数据无法正常渲染）。

• 检查用户认证状态
  如果RLS策略要求用户必须认证，而前端未登录，查询会返回空数组。可以先添加匿名登录测试：

  useEffect(() => {
    async function init() {
      await supabase.auth.signInAnonymously();
      getInvoices();
    }
    init();
  }, []);
  

  或者修改RLS策略允许未认证用户读取数据。

你的原始代码： #

import { useEffect, useState } from "react";
import { supabase } from "./client";

function App() {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    getInvoices();
  }, []);

  async function getInvoices() {
    const { data } = await supabase.from("invoices").select("*");
    setInvoices(data);
    console.log("Fetched invoices:", data);
  }

  return (
    <div>
      <h1>Hello World</h1>
      <ul>
        {invoices.map((invoice) => (
          <li key={invoice.id}>{invoice.family}</li>
        ))}
      </ul>
    </div>
  );
}

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