Javascript 无法分解属性'；文件'；属于'；对象（…）（…）和#x27；因为它是未定义的

我试图通过使用useContext（）在cloud Firestore中映射我的图像集合来在图库中显示图像，但我遇到了以下错误“无法分解对象（…）（…）的属性“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

从“../Firebase”导入{projectFirestore}
从“react”导入{useEffect、useState、useContext、createContext}
常量FireStoreContext=createContext（）
导出函数useFireStore（）{
返回useContext（FireStoreContext）
}
导出函数GalleryProvider（{collection，children}）{
const[docs，setDocs]=useState（[]）；
useffect（（）=>{
const unsub=projectFirestore.collection（'images'）
.orderBy（'createdAt'，'desc'）
.onSnapshot（快照=>{
让文档=[]；
snap.forEach（doc=>{
push（{…doc.data（），id:doc.id}）；
});
setDocs（文件）；
});
return（）=>unsub（）；
}，[“图像]）；
返回(
{儿童}
)
}

画廊公司：

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

从“../../hooks/useFireStore”导入{useFireStore，GalleryProvider}
导入“./Gallery.css”
函数库（）{
const{docs}=useFireStore（'images'）；
返回(
{docs&&docs.map（doc=>{
})}
)
}
导出默认库

尝试console.log（useFireStore（'images'）），这样你和我将看到useFireStore（'images'）的结构是什么，它的返回未定义不应该

Povider

be

Provider

？是的，对。但遗憾的是，仍然无法工作。您是否尝试过像这样对value prop使用单括号：

value={docs}