无法解构“对象（...）（...）”的属性“文档”，因为它未定义答案

【问题标题】：Cannot destructure property 'docs' of 'Object(...)(...)' as it is undefined无法解构“对象（...）（...）”的属性“文档”，因为它未定义
【发布时间】：2021-08-27 05:40:57
【问题描述】：

我正在尝试通过使用 useContext() 在云 Firestore 中映射我的图像集合来在画廊上显示图像，但我遇到此错误“无法解构 'Object 的属性 'docs' (...)(...)' 因为它是未定义的"

上下文：

import { projectFirestore } from '../Firebase'
import { useEffect, useState, useContext, createContext} from 'react'

const FireStoreContext = createContext()

export function useFireStore(){
    return useContext(FireStoreContext)
}


export function GalleryProvider({collection, children}){
    
    const [docs, setDocs] = useState([]);
    
    useEffect(() => {
        const unsub = projectFirestore.collection('images')
        .orderBy('createdAt', 'desc')
        .onSnapshot(snap => {
            let documents = [];
            
            snap.forEach(doc => {
                documents.push({...doc.data(), id: doc.id});
            });
            setDocs(documents);
        });
        return () => unsub();
    }, ['images']);
    
    return (
        <FireStoreContext.Povider value={{docs: docs}}>
            {children}
        </FireStoreContext.Povider>
    )
}

画廊比较：

import {useFireStore, GalleryProvider} from '../../hooks/useFireStore'
import './Gallery.css'


 function Gallery() {
  
     const { docs } = useFireStore('images');

     return (
         <GalleryProvider>
    <div className="img_grid">
    { docs && docs.map(doc =>{
        <div className="imgWrap" key={doc.id}>
            <img src={doc.url} alt="gallery" />
        </div>
    })}
    </div>
         </GalleryProvider>
    )
}
 export default Gallery

【问题讨论】：

尝试console.log(useFireStore('images')) 这样你和我会看到useFireStore('images')的结构是什么
返回未定义
不应该Povider 是Provider？
是的，没错。但遗憾的是仍然无法正常工作
您是否尝试过像这样为 value 属性使用单括号：value={docs}

标签： javascript reactjs firebase google-cloud-firestore use-context

【解决方案1】：

console.log(useFireStore('images')) 返回未定义

【讨论】：