根据 url 从 firestore 检索数据答案

【问题标题】：Retrieveing data from firestore based on url根据 url 从 firestore 检索数据
【发布时间】：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 上输入其他人的用户名时，我会遇到混乱的错误。”什么错误？请点击您问题下方的编辑链接以添加此信息。

标签： reactjs firebase redux google-cloud-firestore

【解决方案1】：

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

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

【讨论】：