首页 文章

如何查询Firestore以按字符串字段获取文档（搜索引擎友好的Slug）

提问于
浏览 次
0

我在React中有一个名为 ShowArticle 的组件，我试图通过名为slug的字符串字段在我的 articles 集合中的 Firestore 中查询单个文档，这样我就可以将我的URL格式化为 //myhost.com/article/show/:slug 其中slug是我的Firestore中匹配的唯一字符串 .

正如我的路线一样：

<Route exact path="/article/show/:slug" component={ShowArticle} />

所以我正在使用 ShowArticle 组件内的 const { slug } = props.match.params; 正确获取 :slug 参数 .

当我向Firestore查询我的数据库中存在的slug时，我没有从Firestore收到任何数据 .

如何通过SEF URL的唯一字符串值检索文章文档？

我的ShowArticle组件如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { firestoreConnect } from 'react-redux-firebase';
import { PropTypes } from 'prop-types';
import Article from "./Article";

class ShowArticle extends Component {
  render() {
    const { article } = this.props;
    if (article) {
      return (
        <div>
          <Article
            key={article.id}
            title={article.title}
            date={article.date}
            body={article.body}
          />
        </div>
      );
    } else {
      return (
        <div>Loading...</div>
      )
    }
  }
}

ShowArticle.propTypes = {
  firestore: PropTypes.object.isRequired
};

export default compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', doc: slug }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle);
javascript reactjs firebase google-cloud-firestore

1 回答

  • 1

    在 firestoreConnect() 回调 doc: slug 回调 queryParams: [ 'equalTo=' + slug ]

    所以你最终会得到：

    export default compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', queryParams: [ 'equalTo=' + slug ] }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle);

    在 react-redux-firebase 包的文档中引用http://react-redux-firebase.com/docs/queries.html#notParsed .

    回复于

相关问题