React TypeScript：无法向Firestore数据库添加推断类型的文档

错误原因分析 #

你遇到的报错核心问题有两个：

1. addDoc函数的返回值是文档引用（DocumentReference<DocumentData>），不是你定义的TodoListTemplate类型，不能直接把返回的引用赋值给TodoListTemplate变量。
2. 文档引用自带的id是Firestore自动生成的字符串类型，和你自定义的TodoListTemplate里的number类型id类型不匹配，这才触发了类型冲突报错。

另外你用as DocumentData强制转换传入的数据完全没必要，反而会干扰TypeScript的类型检查。

解决方案 #

方案1：使用addDoc自动生成文档ID（推荐）

先构造符合自定义类型的数据，调用addDoc添加到Firestore后，再根据需求更新本地状态：

async function generateTodoList(): Promise<void> {
  // 先创建符合自定义类型的Todo数据
  const newTodo: TodoListTemplate = {
    id: Math.floor(Math.random() * 10000),
  };

  // 调用addDoc添加到Firestore，返回文档引用
  const docRef = await addDoc(collection(db, 'todoListCard'), newTodo);
  
  // 如果需要把新Todo加入本地状态，可以结合Firestore生成的文档ID（可选）
  setGeneratedTodoList(prev => [...prev, {
    ...newTodo,
    firestoreDocId: docRef.id // 把Firestore的字符串ID也存下来，方便后续操作
  }]);
}

方案2：使用自定义id作为Firestore文档ID

如果你想让Firestore的文档ID就是你自定义的number类型id，需要用setDoc替代addDoc（因为Firestore文档ID必须是字符串，所以要把你的数字id转成字符串）：

import { doc, setDoc } from "firebase/firestore"; // 记得导入doc和setDoc

async function generateTodoList(): Promise<void> {
  const newTodo: TodoListTemplate = {
    id: Math.floor(Math.random() * 10000),
  };

  // 用自定义id的字符串形式作为文档ID
  const docRef = doc(db, 'todoListCard', newTodo.id.toString());
  // 写入数据到指定文档
  await setDoc(docRef, newTodo);
  
  // 更新本地状态
  setGeneratedTodoList(prev => [...prev, newTodo]);
}

额外优化建议 #

把generatedTodoList的any[]类型改成TodoListTemplate[]（或者结合Firestore ID的扩展类型），让类型更安全：

// 定义扩展类型（如果需要存Firestore文档ID）
interface TodoWithFirestoreId extends TodoListTemplate {
  firestoreDocId: string;
}

// 然后修改状态定义
const [generatedTodoList, setGeneratedTodoList] = useState<TodoWithFirestoreId[]>([]);

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