根据 url 从 firestore 检索数据

Posted 2023-02-22

【中文标题】根据 url 从 firestore 检索数据

【英文标题】：Retrieveing data from firestore based on url

【发布时间】：2020-06-22 04:46:39

【问题描述】：

我正在尝试使用基于 URL 内容从 firestore 获得的数据来呈现个人资料页面。 例如，当用户键入mywebsite/profile/someusername 时，我想从firestore 数据库中检索配置文件信息并呈现Profile 组件。我有一个保持应用程序状态的 redux 商店，我有 postReducer 和 authReducer 以及相应的操作。当我使用componentDidMount() 生命周期方法进行第一次渲染时，当用户访问他们自己的个人资料页面时，它会显示有关他们的信息和他们自己的数据。但是在 URL 上输入其他人的用户名时，我会收到 cannot read property 'props' of undefined 之类的错误。什么对我来说是个好策略？任何帮助，将不胜感激。 我的Profile 组件代码：

class Profile extends Component 
    //component state and render method are removed to make some space

    componentDidMount() 
        this.props.getUserPosts(this.props.profile.username);
    


const mapStateToProps = (state) => 
    return 
        auth: state.firebase.auth,
        profile: state.auth.profile,
        profileError: state.auth.profileError,
        userPosts: state.post.userPosts,
        userError: state.post.userError
    
;
const mapDispatchToProps = (dispatch) => 
    return 
        getUserPosts: (username) => 
            dispatch(getUserPosts(username));
        ,
        getProfile: (username) => 
            dispatch(getProfile(username));
        
    
;
export default connect(mapStateToProps, mapDispatchToProps)(Profile);

【问题讨论】：

“在 URL 上输入其他人的用户名时，我会遇到混乱的错误。”什么错误？请点击您问题下方的编辑链接以添加此信息。

【参考方案1】：

这在很大程度上取决于您如何在项目中设置 firebase，但您只需根据他们的文档访问 firestore。我为另一个问题写了一个小（尽可能小）的例子：Firebase listener with React Hooks

非常欢迎您从中汲取灵感。