Next.js使用Firebase SDK v9获取Firestore数据报Unexpected state错误

你遇到的FIRESTORE (9.8.4) INTERNAL ASSERTION FAILED: Unexpected state错误核心诱因是orderBy方法传参非法：

• Firestore v9 SDK的orderBy()方法第二个参数仅支持两个合法排序方向值：升序"asc"、降序"desc"，你代码中传入的"detail"为无效值，会直接触发SDK内部排序索引构建逻辑的断言失败，抛出上述内部错误。

除此之外你的代码还存在两个会导致运行/渲染异常的问题：

• 未从Firebase Firestore SDK导入代码中用到的collection、query、orderBy、onSnapshot方法，运行时会触发方法未定义报错
• Todo列表渲染的map回调中使用了大括号包裹JSX但未写return返回值，会导致页面无法正常渲染拉取到的待办内容

1. 修正排序查询参数，根据你的业务需求替换orderBy的第二个参数为合法排序方向，例如按时间戳倒序排列的写法如下：

const q = query(collectionRef, orderBy("timestamp", "desc"));

2. 补全缺失的SDK方法导入，修改TodoList组件顶部的导入语句为：

import React, { useEffect, useState } from "react";
import { collection, query, orderBy, onSnapshot } from "firebase/firestore";
import { db } from "../firebase";

3. 修复列表渲染的返回逻辑，将map回调中的大括号替换为小括号隐式返回JSX，或手动添加return语句：

return (
  <div>
    {todos.map((todo) => (
      <div key={todo.id}>{todo.title}</div>
    ))}
  </div>
);

补充提示：如果你的todos集合中存在未设置timestamp字段的文档，建议在查询规则或前端逻辑中做好空值兼容，避免字段转换时出现空指针报错。

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