Next.js+Firebase搜索栏二次使用报错：TypeError: prevDeps.join is not a function

错误原因 #

TypeError: prevDeps.join is not a function 根源是useEffect依赖项格式错误：React要求useEffect的第二个参数必须是数组，你直接传入了router.query.id（单个值），React内部处理依赖对比时会尝试调用数组的join方法，而字符串/undefined没有该方法，导致崩溃。

修复方案 #

1. 修正useEffect依赖数组 #

将依赖项改为数组形式，把router.query.id放入数组：

useEffect(() => {
  // 你的业务逻辑
}, [router.query.id]) // 此处必须是数组

2. 清理Auth订阅，避免内存泄漏 #

onAuthStateChanged会返回取消订阅的函数，每次useEffect执行时需清理旧订阅，防止重复监听：

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, async (user) => {
    // 你的业务逻辑
  });

  // 组件卸载或依赖变化时取消订阅
  return unsubscribe;
}, [router.query.id])

3. 重置搜索结果，避免数据累积 #

每次执行搜索前清空结果数组，防止二次搜索时旧数据残留：

if (user) {
  setPrograms([]); // 重置数组
  const places = query(collection(getFirestore(app), '/programs'));
  const querySnapshot = await getDocs(places);
  
  querySnapshot.docs.forEach(doc => {
    if (JSON.stringify(doc.data()).includes(router.query.id)) {
      const programObj = {
        age: doc.data().price,
        icon: doc.data().logo,
        status: "software",
        date: doc.data().start,
        name: doc.data().name,
        salary: '$$$',
        email: doc.data().website,
        designation: 'Human Resources Assistant',
        id: doc.id
      };
      setPrograms(prev => [...prev, programObj]);
    }
  });
}

4. 优化路由跳转（可选） #

Next.js Link组件无需完整域名，使用相对路径更规范：

<Link href={`/search/${search}`}>
  <Magnify fontSize='small' />
</Link>

5. 优化搜索性能（推荐） #

当前通过JSON.stringify过滤数据效率极低，建议用Firebase查询API直接过滤：

const keyword = router.query.id;
// 示例：查询name字段包含关键词的文档（需提前创建索引）
const places = query(
  collection(getFirestore(app), '/programs'),
  where('name', '>=', keyword),
  where('name', '<=', keyword + '\uf8ff')
);
const querySnapshot = await getDocs(places);
// 直接处理查询结果即可

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