Flutter从Supabase获取数据时data.error与data.data报错求助

报错原因 #

你使用的是新版Supabase Flutter SDK（v1.0及以上），这个版本彻底重构了API设计：

• 移除了旧版的Response包装对象（即带有data和error属性的对象）
• 查询成功时直接返回对应的数据集合（比如List<dynamic>）
• 查询失败时会直接抛出异常，不再通过error属性返回
• execute()方法也已被移除，无需调用

这就是你的代码中data.error、data.data被校验器标红，且execute()不被识别的核心原因。

修正后的代码 #

按照新版SDK的规范，改用try-catch处理异常，直接接收查询结果：

class _ProductInfoPageState extends State<ProductInfoPage> {
  List<dynamic>? products = [];
  bool isLoading = true; // 新增加载状态，优化用户体验
  String? errorMessage; // 存储错误信息

  @override
  void initState() {
    super.initState();
    fetchProducts();
  }

  Future<void> fetchProducts() async {
    setState(() {
      isLoading = true;
      errorMessage = null;
    });

    // 先判断用户是否登录，避免空指针异常
    final currentUser = supabase.auth.currentUser;
    if (currentUser == null) {
      setState(() {
        errorMessage = '用户未登录';
        isLoading = false;
      });
      print('用户未登录');
      return;
    }

    try {
      // 查询成功直接返回数据列表
      final data = await supabase
          .from('products')
          .select('*')
          .eq('user_id', currentUser.id)
          .order('id', ascending: true);

      setState(() {
        products = data as List<dynamic>;
        isLoading = false;
      });
    } catch (err) {
      // 捕获查询异常并解析错误信息
      final error = err as PostgrestError;
      setState(() {
        errorMessage = error.message;
        isLoading = false;
      });
      print('获取产品失败: ${error.message}');
    }
  }
}

额外优化建议 #

1. 使用强类型模型：避免用dynamic，可以创建Product类，通过fromJson方法将查询结果转为强类型对象，提升代码可读性和安全性。
2. 加载状态可视化：在UI中根据isLoading变量显示加载指示器，避免用户看到空白页面。
3. 错误信息前端展示：将errorMessage展示在页面中，让用户直观了解错误原因。

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