Firebase v9+React v18删除文档时出现indexOf未定义错误求助

错误根源 #

1. 参数传递错误：按钮onClick里用了未定义的index变量，而map回调的索引参数是idx；同时deleteAnime函数未接收要删除的文档ID，内部引用的anime.id并非当前遍历项的ID，大概率指向了未定义的全局变量。
2. 数据初始化问题：anime数组或其中元素可能未正确初始化，导致访问属性时出现undefined。
3. key值不规范：用idx作为key易引发重渲染异常，不符合React最佳实践。

修复方案 #

1. 修正删除函数 #

修改deleteAnime，让它接收事件和目标文档ID，精准定位要删除的Firestore文档：

// Delete document
const deleteAnime = (e, docId) => {
  e.preventDefault();
  deleteDoc(doc(db, "Users", uid, "anime", docId));
};

2. 修正渲染代码 #

• 传递当前项的d.id给删除函数，替换错误的index变量。
• 用文档唯一IDd.id作为组件key，避免重渲染问题。
• 优化form提交逻辑，按钮设为submit类型直接绑定form的onSubmit：

{anime.map((d) => (
  <form 
    onSubmit={(e) => deleteAnime(e, d.id)} 
    className={styles.card} 
    key={d.id}
  >
    <h2>{d.title}</h2>
    <p>Genre: {d.genre}</p>
    <p>Number of episodes: {d.numb}</p>
    <p>Comment: {d.comment}</p>
    <p>Rating: {d.rating}/10</p>
    <button type="submit">Remove</button>
  </form>
))}

3. 排查基础数据问题 #

如果仍报错，检查以下几点：

• 确保anime数组初始化正确，比如用useState设为空数组：

  const [anime, setAnime] = useState([]);
  

• 确认uid已正确获取（比如从Firebase Auth中拿到当前用户ID，避免undefined）。
• 验证Firestore相关方法已正确导入：

  import { doc, deleteDoc } from "firebase/firestore";
  

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