我想在next js和firebase中创建一个搜索栏，它的工作原理是从url中获取slug，然后通过我的搜索算法解析它，问题是如果用户使用搜索栏2次，它就会中断并显示以下错误：

我就是这样把数据

<Link  href={`http://localhost:3000/search/${search}/`} >
                <Magnify fontSize='small' />
              </Link>

这就是我如何得到它

const serachId = router.query.id;
    useEffect(() => {
        onAuthStateChanged(auth, async (user) => {

            if (user) {
                // User is signed in, see docs for a list of available properties
                // https://firebase.google.com/docs/reference/js/firebase.User
                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)) {
                        let 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]);
                    }
                })
            }
            else {
                console.log("no loggin")
            }
        });

    }, router.query.id)