TypeScript结合useState报错求助：移除any类型时类型不匹配

问题背景 #

正在学习TypeScript，尝试移除代码中所有any类型，但遇到类型不匹配错误。应用能正常运行，但深知any不符合规范，需要优化代码，明确错误原因和解决方向。

错误信息 #

Argument of type 'Dispatch<SetStateAction<[] | undefined>>' is not assignable to parameter of type 'Dispatch<string[]>'.
  Type 'string[]' is not assignable to type 'SetStateAction<[] | undefined>'.
    Type 'string[]' is not assignable to type '[]'.
      Target allows only 0 element(s) but source may have more.

相关代码片段 #

App.tsx #

const [userData, setUserData] = useState<any>();
fetchData('user', setUserData);

return <Profile content={userData} />;

Firebase.tsx #

export const fetchData = async (storage: string, setData: React.Dispatch<string[]>) => {
  const q = query(collection(db, storage));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    let array: string[] = [];
    querySnapshot.forEach((doc: any) => {
      array.push({ ...doc.data(), id: doc.id });
    });
    setData(array);
  });
  return () => unsubscribe();
};

Profile.tsx #

type Props = {
  content?: {
    firstName: string;
    lastName: string;
  }[];
  location?: string;
  image?: string;
};

const Profile: React.FC<Props> = ({ content, image }) => {};

错误原因分析 #

1. useState类型推断错误：给useState指定any类型且未设置初始值，TypeScript会推断userData的类型为[] | undefined，对应的setUserData类型是Dispatch<SetStateAction<[] | undefined>>，但fetchData要求接收Dispatch<string[]>类型的 setState函数，两者类型完全不兼容。
2. fetchData类型定义矛盾：把array定义为string[]，但实际push的是包含firstName、lastName、id的对象，属于用字符串数组类型存储对象数组，本身就是类型错误。
3. 数据流类型未统一：Profile组件的content属性期望{firstName: string; lastName: string}[]类型，但fetchData和useState的类型都没和这个对齐，导致整个数据流的类型脱节。

解决方向与步骤 #

1. 定义统一的用户数据类型 #

先明确Firebase返回的用户数据结构，统一类型：

type User = {
  firstName: string;
  lastName: string;
  id: string; // 包含从doc.id获取的ID字段
};

2. 修正App.tsx中的useState类型 #

给useState指定正确类型，建议设置初始值为空数组，避免undefined带来的额外判断：

// 初始值设为空数组，类型为User[]
const [userData, setUserData] = useState<User[]>([]);
fetchData('user', setUserData);

return <Profile content={userData} />;

如果需要允许userData为undefined，也可以写成：

const [userData, setUserData] = useState<User[] | undefined>();

3. 修正Firebase.tsx的类型 #

• 对齐setData的类型与useState的Dispatch类型
• 修正array的类型为User[]
• 移除doc的any类型，使用Firebase提供的官方类型：

import { QueryDocumentSnapshot } from "firebase/firestore";

export const fetchData = async (storage: string, setData: React.Dispatch<SetStateAction<User[]>>) => {
  const q = query(collection(db, storage));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    let array: User[] = [];
    querySnapshot.forEach((doc: QueryDocumentSnapshot) => {
      // 数据结构确定时，用类型断言确保符合User结构
      array.push({ ...doc.data(), id: doc.id } as User);
    });
    setData(array);
  });
  return () => unsubscribe();
};

如果想更严谨，可使用Firestore的withConverter给集合指定类型，避免类型断言。

4. 对齐Profile.tsx的Props类型 #

把content的类型改成User[]，与整个数据流统一：

type Props = {
  content?: User[];
  location?: string;
  image?: string;
};

const Profile: React.FC<Props> = ({ content, image }) => {};

额外建议 #

• 尽量用unknown替代any，遇到未知类型时通过类型收窄处理
• 对Firestore数据建议使用withConverter确保类型一致性，减少类型断言
• 开启TypeScript严格模式（strict: true），提前发现更多类型问题

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