Firebase V9报错TypeError：无法读取undefined的indexOf属性

• 这是Firebase V9模块化SDK的典型路径参数错误：SDK内部解析文档/集合路径时，会对传入的每一段路径字符串调用indexOf做格式校验，只要某一段路径值是undefined、null这类非字符串类型，就会抛出TypeError: Cannot read properties of undefined (reading 'indexOf')。
• 你代码里的直接触发点：Next.js的useRouter()在客户端首次水合阶段，Router.query还没完成解析，初始状态下Router?.query?.id的值为undefined，你直接把这个undefined值作为路径段传给collection()构造channels/[id]/messages集合路径，直接触发SDK内部校验报错。
• 附带的逻辑问题：当前useEffect依赖数组只写了[db]，db是Firebase初始化后不会变更的全局实例，既没有监听路由id的变化，也没有在路由参数不存在时跳过监听逻辑，组件首次挂载必然触发该错误。

1. 增加参数前置校验：只有当路由id解析完成、是有效值时，才调用Firebase接口建立快照监听；参数不存在时直接返回，避免无效调用。
2. 修正依赖数组：将路由id加入useEffect依赖项，切换不同频道时会自动取消旧频道的监听、建立新频道的消息监听，同时在清理函数中主动取消订阅避免内存泄漏。

修复后的对应代码片段：

const [user, loading, error] = useAuthState(auth);
const [channelInfo, setChannelInfo] = useRecoilState(channelState)
const [input, setInput] = useState('')
const ChatRef = useRef()
const [chats, setChats] = useState([])
const [chan, setCHan] = useRecoilState(channelId)
const Router = useRouter() 
const currentChannelId = Router.query.id;

useEffect(()=>{
    // 路由参数未加载完成时跳过监听建立
    if (!currentChannelId) return;
    const unsubscribe = onSnapshot(
        collection(db, 'channels', currentChannelId, 'messages'),
        (snapshot) => {
            setChats(snapshot.docs)
        }
    )
    // 清理函数：组件卸载/依赖变更时取消订阅
    return () => unsubscribe();
}, [db, currentChannelId])

补充：路径合法的前提下，onSnapshot返回的快照对象必然存在docs属性，不需要给snapshot?.docs加可选链。

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