使用Firestore与Firebase时出现TypeError: query is not a function错误

原因 #

你遇到的TypeError: query is not a function以及VSCode中导入的query未高亮的问题，核心是变量名冲突：
在getServerSideProps函数的参数解构里，你声明了{ query }（这是Next.js传递的路由查询参数对象），这个局部作用域的query变量直接覆盖了从firebase/firestore导入的同名query函数。当你在函数内部调用query(...)时，实际调用的是路由参数对象而非Firestore的查询构造函数，因此会报错“不是函数”，VSCode也会因局部变量覆盖而不对导入的函数进行高亮。

解决方法 #

两种修复方式任选其一即可：

方式1：重命名导入的Firestore query函数 #

修改导入语句，给query添加别名：

import { query as firestoreQuery, getDocs, collection, limit, where, orderBy } from 'firebase/firestore';

之后构造查询时使用别名：

const postsQuery = firestoreQuery(
  collection(firestore, 'posts'),
  limit(5),
  where('published', "==", true),
  where('username', "==", username),
  orderBy('createdAt', 'desc')
);

方式2：重命名路由参数的query变量 #

修改getServerSideProps的参数解构，给路由参数的query加别名：

export async function getServerSideProps({ query: routerQuery }) {
  const { username } = routerQuery;
  // 后续代码保持不变，此时调用的query(...)就是Firestore的导入函数
}

额外提醒：代码中用到的postToJSON未看到定义，需确保该函数已正确引入或实现，避免后续出现新错误。

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