Next.js 13中'any[] | null'无法赋值给SetStateAction<never[]>的解决方法

错误源于两个核心问题：

• useState([])未指定类型，TypeScript默认推断为never[]，导致setSubCategories仅能接收never[]类型的值
• Supabase的select()方法返回的data为any[] | null类型，无法直接赋值给要求never[]的状态

解决方案步骤： #

1. 给状态指定明确类型
   推荐先定义子分类的类型接口（符合TypeScript规范），再为状态指定类型：

   // 按数据库表结构定义子分类接口
   interface SubCategory {
     id: number;
     name: string;
     // 补充你的表中其他字段
   }
   
   // 初始化状态时指定类型
   const [subCategories, setSubCategories] = useState<SubCategory[]>([]);
   

   若暂不需要严格类型校验，也可直接指定为任意数组：

   const [subCategories, setSubCategories] = useState<any[]>([]);
   

2. 处理Supabase返回的null值
   Supabase查询无结果时data会返回null，需转换为数组后再赋值：

   setSubCategories(subCategories || []);
   

3. 修复无限渲染问题
   直接在组件顶层调用fetchSubCategories()会导致组件每次渲染都执行请求，造成无限循环，需用useEffect包裹：

   import { useEffect } from 'react';
   
   // ...
   
   useEffect(() => {
     fetchSubCategories();
   }, []); // 空依赖数组确保仅在组件挂载时执行一次
   

完整修正后的代码示例： #

import { createClient } from '@supabase/supabase-js';
import { useState, useEffect } from 'react';

// 定义子分类类型接口
interface SubCategory {
  id: number;
  name: string;
  // 补充数据表中的其他字段
}

export default function SubCategoryTable() {
  const [subCategories, setSubCategories] = useState<SubCategory[]>([]);

  async function fetchSubCategories() {
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

    const supabase = createClient(supabaseUrl, supabaseAnonKey);
    const { data: subCategories } = await supabase.from("sub_categories").select();
    // 处理null情况，确保传入数组类型
    setSubCategories(subCategories || []);
  }

  // 仅在组件挂载时执行一次数据请求
  useEffect(() => {
    fetchSubCategories();
  }, []);

  return (
    // 你的组件渲染内容
  );
}

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